<!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/3.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>

                <router-view></router-view>

        </div>

    </body>

    <script>

        var Home=Vue.extend({

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

        });

        var News=Vue.extend({

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

        });

        var router =new VueRouter({

            routes :[

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

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

                {path:'/',component:Home}

            ]

        });

        var vm=new Vue({

            router

        }).$mount('#app');

    </script>

</html>

运行结果:

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

  1. vue.js路由学习笔记

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

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

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

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

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

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

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

  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. IEEE 2012 PHM数据挑战赛

    Sutrisno E, Oh H, Vasan A S S, et al. Estimation of remaining useful life of ball bearings using dat ...

  2. eclipse配置hadoop location的端口号

    在eclipse下配置hadoop location的时候 hadoop端口号应该与conf文件夹下的core-site.xml以及mapred-site.xml保持一致 前者对应dfs master ...

  3. 一些API的用法

    //1.init初始化 NSString * str1 = [[NSString alloc] init]; NSLog(@"str1 = %@",str1); //2.initW ...

  4. JAVA对Excel文件进行操作

    JAVA EXCEL API:是一开放源码项目,通过它Java开发人员可以读取Excel文件的内容.创建新的Excel文件.更新已经存在的Excel文件.使用该API非Windows操作系统也可以通过 ...

  5. thread常用方法

  6. sqlplus--spool命令参数详解

    sqlplus--SPOOL参数详解 Spool是Oracle快速导出数据的工具,是sqlplus的指令,不是sql语法里的东西 一.Spool常用的设置set arraysize 5000;  // ...

  7. solr的查询语法、查询参数、检索运算符

    转载自:http://martin3000.iteye.com/blog/1328931 1.查询语法 solr的一些查询语法 1.1. 首先假设我的数据里fields有:name, tel, add ...

  8. Go语言-变量和常量

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

  9. (转)Linux网络协议栈(三)——网络设备(1)

    网络设备(network device)是内核对网络适配器(硬件)的抽象与封装,并为各个协议实例提供统一的接口,它是硬件与内核的接口,它有两个特征:(1)    作为基于硬件的网络适配器与基于软件的协 ...

  10. Luogu 1484 种树

    Luogu 1792 算是双倍经验. 我们考虑对于一个点,我们要么选它,要么选它周围的两个点. 所以我们考虑用一个堆来维护,每次从堆顶取出最大值之后我们把它的权值记为:它左边的权值加上它右边的权值减去 ...