<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

        <script src="https://cdn.bootcss.com/vue-router/2.0.1/vue-router.js"></script>

    </head>

    <body>

        <div id ="app">

            <div>

                <router-link to="/home">主页</router-link>

                <router-link to="/news">新闻</router-link>

            </div>

            <div>

                <router-view></router-view>

            </div>

        </div>

    </body>

    <script>

        var Home={

            template:'<h3>我是主页</h3>'

        };

        var News={

            template:'<h3>我是新闻</h3>'

        };

        var router =new VueRouter({

            routes :[

                {path:'/home',component:Home},

                {path:'/news',component:News},

                ]

        });

        new Vue({

            router,

            el:'#app'

        });

    </script>

</html>

特别注意版本,之前学习时候是2.0.1,后来改了版本,发觉不可以i用了,等过几天进行更新下学习下

vue.js路由学习笔记的更多相关文章

  1. vue.js路由学习笔记二

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. 两万字Vue.js基础学习笔记

    Vue.js学习笔记 目录 Vue.js学习笔记 ES6语法 1.不一样的变量声明:const和let 2.模板字符串 3.箭头函数(Arrow Functions) 4. 函数的参数默认值 5.Sp ...

  3. 从零开始学习Vue.js，学习笔记

    一.为什么学习vue.js methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. vue.js兼具angular.js和react的优点,并且剔除了他们的缺点 官网:http://cn ...

  4. 两万字Vue.js基础学习笔记（二）

    Vue.js学习笔记(二) 4.模块化开发 ES6模块化的导入和导出 我们使用export指令导出了模块对外提供的接口,下面我们就可以通过import命令来加载对应的这个模块了 首先,我们需要在HTM ...

  5. vue.js初始学习笔记&vue-cli

    笔记一下: vue.js 安装,参考: http://www.cnblogs.com/wisewrong/p/6255817.html (vue-cli) http://www.cnblogs.com ...

  6. Vue.js实战学习笔记（中）

    1.递归组件给组件设置name属性,组件就可以在它的模板内调用自己,但必须给一个条件来限制递归数量.<div id="app"> <child-component ...

  7. vue.js 源代码学习笔记 ----- html-parse.js

    /** * Not type-checking this file because it's mostly vendor code. */ /*! * HTML Parser By John Resi ...

  8. vue.js 源代码学习笔记 ----- 工具方法 lang

    /* @flow */ // Object.freeze 使得这个对象不能增加属性, 修改属性, 这样就保证了这个对象在任何时候都是空的 export const emptyObject = Obje ...

  9. vue.js 源代码学习笔记 ----- 工具方法 env

    /* @flow */ /* globals MutationObserver */ import { noop } from 'shared/util' // can we use __proto_ ...

随机推荐

  1. Solaris与Windows Active Directory集成

    通过Solaris与Active Directory的集成,Solaris可以使用Windows 2003 R2/ 2008 Active Directory来进行用户登录验证.以下是简要配置过程. ...

  2. tomcat 三种部署方式以及server.xml文件的几个属性详解

    一.直接将web项目文件件拷贝到webapps目录中 这是最常用的方式,Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.如果你想要修改这个默认 ...

  3. elastic(8)版本控制

    转自: http://www.cnblogs.com/AK47Sonic/p/7563393.html elasticsearch 版本控制: 内部版本控制 外部版本控制 内部版本控制: 内部版本会检 ...

  4. Shell编程进阶 1.9 while循环

    while 死循环 vim while.sh #!/bin/bash ## while : do date +%T sleep done : 永久帧 查看时间 3秒循环1次 打印1-10 #!/bin ...

  5. DAY14-前端之Bootstrap框架

    Bootstrap介绍 Bootstrap是Twitter开源的基于HTML.CSS.JavaScript的前端框架. 它是为实现快速开发Web应用程序而设计的一套前端工具包. 它支持响应式布局,并且 ...

  6. pthon之函数式编程

    函数式编程是一种抽象计算的编程范式. 不同语言的抽象层次不同:计算机硬件->汇编语言->C语言->Python语言 指令        ->           ->函数 ...

  7. from xml.etree import cElementTree as ET

  8. 卸载phonegap

    npm uninstall cordova  -gnpm uninstall phonegap -g

  9. [xdoj1007]易碎的鸟蛋(dp)

    解题思路:f[n,m]表示n层楼.m个鸡蛋时所需要的最小次数,则 转移方程为:f[n,m] = min{ 1+max(f[i-1,m-1], f[n-i,m]) | i＝1..n }初始条件:f[i, ...

  10. Go语言-变量和常量

    我们在这里需要优先说明的是用于声明变量的关键字var,以及用于声明常量的关键字const.要知道,绝大多数的数据类型的值都可以被赋给一个变量,包括函数.而常量则不同,它只能被赋予基本数据类型的值本身. ...