<!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. NodeJs之文件合并（某一文件的内容发生变化与之相关的内容重新合并）

    首先,一个文件里面的内容是由多个文件共同组成的.例如一个文件夹包含有多文件(文件夹) 然后,当其中一个发生变化时所用与之有直接作用的文件(文件夹)都会重新组合. /*注意:该例子需要在同级目录下完成及 ...

  2. DAY9-python并发之多进程

    一 multiprocessing模块介绍 python中的多线程无法利用多核优势,如果想要充分地使用多核CPU的资源(os.cpu_count()查看),在python中大部分情况需要使用多进程.P ...

  3. ASP.NET MVC3 HtmlHelper用法大全

    HTML扩展类的所有方法都有2个参数:以textbox为例子public static string TextBox( this HtmlHelper htmlHelper, string name, ...

  4. vue 跨域访问http

    axios用法: npm install axios --save-dev 2.导入: import axios from 'axios'; 3.使用($(form)需要先按装jQuery) axio ...

  5. cocos2d-x坐标系详解

    cocos2d-x官方文档 笛卡尔坐标系 不同坐标系简介 笛卡尔坐标系 你可能上学的时候就已经知道“笛卡尔坐标系”了,它在几何课本里经常用到.如果你已经忘得差不多了,下面这些图片可以很快唤起你的记忆: ...

  6. css 层叠式样式表（2）

    一,样式表分类 (1)内联样式. --优先级最高,代码重复使用最差. (当特殊的样式需要应用到单独某个元素时,可以使用. 直接在相关的标签中使用样式属性.样式属性可以包含任何 CSS 属性.) (2) ...

  7. Tensorflow手写数字识别训练（梯度下降法）

    # coding: utf-8 import tensorflow as tffrom tensorflow.examples.tutorials.mnist import input_data #p ...

  8. ROS Learning-014 learning_tf（编程） 坐标系变换(tf)广播员 (Python版)

    ROS Indigo learning_tf-01 坐标系变换(tf)广播员 (Python版) 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu ...

  9. cmake中设置ELF文件加载动态库的位置

    1. 三个文件 1. world.c #include<stdio.h> void world(void) { printf("world.\n"); } 2. hel ...

  10. Java之封装特性

    Java中的三大特性:继承,封装,多态: 其中封装概念:封装是把过程和数据包围起来,对数据的访问只能通过已定义的接口. 面向对象计算始于这个基本概念,即现实世界可以被描绘成一系列完全自治.封装的 对象 ...