<!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. SqlServer——事务一编程进阶（SqlServer技术内幕 T-SQL程序设计 第九章

    事务格式如下: 1.开启事务: begin tran 2.提交事务:commit tran 3.回滚事务:rollback tran 判断事务是提交还是应该回滚有两种方式,一是全局变量 @@error ...

  2. DDD学习笔录——简介DDD的战术模式、问题空间和解空间

    DDD的战术模式 DDD的战术模式(也称为模型构造块)是一个帮助创建 用于复杂有界上下文的有效模型的 模式集合. 也就是我们常说的设计模式. 问题空间 问题空间将问题域提炼成更多可管理的子域,是真对于 ...

  3. 进程与进程之间通信Manager

    #!/usr/bin/env python from multiprocessing import Process,Manager #Manager进程与进程之间通信 def Foo(i,dic): ...

  4. IO流对文件的读取操作

    /*1. 在当前项目的根目录下有一个名为“info.txt”的文件,里面存放的内容如下(可手动创建录入,不需要使用IO流): 2. 利用IO流的知识读取info.txt文件的内容, 在控制台上打印大写 ...

  5. loj2395 [JOISC 2017 Day 2]火车旅行

    传送门 分析 我们知道无论往左走还是往右走一定都是往不低于这个点的地方走 于是我们可以考虑用倍增来维护一个点向左和向右走$2^i$最远分别能走到哪里 我们可以先用单调栈求出直走一步的情况,之后再处理倍 ...

  6. Luogu 3521 [POI2011]ROT-Tree Rotations

    BZOJ 2212 从下到上线段树合并. 考虑到每一个子树内部产生的贡献不可能通过换儿子消除,所以一次更换只要看看把哪个儿子放在左边产生的逆序对数少就可以了. 逆序对数可以在线段树合并的时候顺便算出来 ...

  7. WebGoat系列实验Buffer Overflows & Code Quality & Concurrency

    WebGoat系列实验Buffer Overflows & Code Quality & Concurrency Off-by-One Overflows 实验需要访问OWASP Ho ...

  8. 【LeetCode】 Longest Common Prefix

    Longest Common Prefix Write a function to find the longest common prefix string amongst an array of ...

  9. 对Dapper的一点改造

    微软推出的ORM, EF在我开发的项目中给我的感觉一直都是慢.优点是高度封装的底层.便于开发. Dapper在多篇性能比较的网站中.都是名列前三.缺点是手写SQL,不便于开发.   如果能结合EF的优 ...

  10. Javascript的对象分类

    返回索引 按W3CSchool分类 1.JS内置对象 在W3CShool中对应JavaScript对象  参考