<!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. Github修改项目显示的语言类型

    //仓库的根目录下创建 .gitattributes 文件,添加以下代码: *.js linguist-language=java *.css linguist-language=java *.htm ...

  2. css水平居中（一）

    第一种方法:使用text-align属性. 看到一篇博客,也不知道是不是我理解的问题,博客上说text-align可以是内联元素水平居中,我感觉这样的说法是不是有些不准确. text-align属性规 ...

  3. 【272】ArcPy处理数据

    参考:ArcPy 函数列表(按字母顺序) 参考:在arcgis上用python脚本(arcpy)做数据批处理 1. 导入 ArcPy,定义 Workspace >>> import ...

  4. python爬虫--常见错误

    1)socket.error: [Errno 10054] ython socket.error: [Errno 10054] 远程主机强迫关闭了一个现有的连接.因为对一个网站大量的使用urlopen ...

  5. eclipse 报错：GC overhead limit exceeded

    还是eclipse内存问题 修改eclipse.ini -Xms512m -Xmx1024m 必要的情况下, 添加 -XX:MaxPermSize=1024M  表示在编译文件时一直占有最大内存

  6. GUI编程01

    1 tkinter TkInter是标准的Python GUI库.的Python与Tkinter的结合提供了一个快速和容易的方法来创建GUI应用程序. Tkinter的提供了一个强大的面向对象的接口T ...

  7. opencv3.2加载图片

    #include <opencv2/opencv.hpp>#include <iostream> using namespace cv;using namespace std; ...

  8. ROS Learning-005 beginner_Tutorials 创建ROS程序包（就是软件包）

    ROS Indigo beginner_Tutorials-04 创建ROS程序包(就是软件包) 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu ...

  9. Luogu 2151 [SDOI2009]HH去散步

    BZOJ 1875 矩阵乘法加速递推. 如果不要求不能走同一条边,那么直接构造出矩阵快速幂即可,但是不走相同的道路,怎么办? 发现边数$m$也很小,我们直接把$2 * m$开成一个矩阵,相当于记录上一 ...

  10. centos安装中文字体

    1.查看字体列表 2.将需要上传的字体上传至linux服务器/usr/share/fonts/chinese目录下 3.修改chinese目录的权限 chmod -R /usr/share/fonts ...