<!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. How to Enabling and Diabling VxDMP devices for use with Oracle ASM

    Enable DMP support for ASM to make DMP devices visible to ASM as available disks To make DMP devices ...

  2. js正则基础总结和工作中常用验证规则

    知识是需要系统的.就像js正则用了那么多次,却还是浑浑噩噩,迫切需要来一次整理,那么来吧! 基本知识 元字符 \d 匹配数字等于[0-9] \w 匹配字母.数字.下划线.中文 \s 匹配任意空白字符 ...

  3. oracle常用函数总结（一）

    最近在读数据库存储过程,或者在xml里写sql时用到数据库函数,笔者觉得有必要总结一下,当然有的函数笔者也很懵逼,不过可以问度娘啊!好了!开始正题. )s from dual;--1 若nvl第一个参 ...

  4. lombok与spring的恩怨

    下面是lombok按照 Java Bean 的规范生成的 下面是spring mvc里jackson 需要的 xXxx问题还是顺势而为吧

  5. Elasticsearch之curl创建索引

    前提,是 Elasticsearch之curl创建索引库 [hadoop@djt002 elasticsearch-2.4.3]$ curl -XPUT 'http://192.168.80.200: ...

  6. ubuntu16部署gitlab

    一.gitlab的安装 1. 安装依赖包 $ sudo apt-get update #如无ssh还需安装openssh-server $ sudo apt-get install postfix c ...

  7. Centos7安装mysql缺乏yum源怎么安装

    找到mysql5.6的centos的repo源,终于解决mysql的安装问题: 1.确保centos安装了wget,没有的话安装wget   1 yum install wget 2.下载mysql的 ...

  8. php学习笔记-elseif

    <?php if(condition1) { func1(); }elseif(condition2) { func2(); }else { func3(); } ?> elseif需要明 ...

  9. ZROI2018普转提day7t1

    传送门 分析 一道有意思的小题... 我们发现如果$(1,1)$为白色,则将其变为白色需要偶数次操作,而如果为黑色则需要奇数次操作 我们知道要让A赢需要奇数次操作,所以我们只需要判断$(1,1)$的颜 ...

  10. python3-file文件操作

    # Auther: Aaron Fan '''打开文件的模式有三种:r,只读模式(默认).w,只写模式.[不可读:不存在则创建:存在则删除内容:因为会清空原有文件的内容,一定要慎用]a,追加模式.[可 ...