<!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. DAY5-常用模块

    一 time与datetime模块 二.random模块 三.os模块 四.sys模块 五 shutil模块 六 json&pickle模块 七 shelve模块 八 xml模块 九 conf ...

  2. 向linux内核增加一个系统调用-2(利用proc打印信息)

    添加系统调用,打印/proc中的系统信息 前面关于proc和内核态函数的东西可以对比代码来看. 参考 http://blog.csdn.net/kylin_fire_zeng/article/deta ...

  3. 使用myeclipse自动导入hibernate3的jar包，如何关联hibernate源码的解决办法

    1.在网上找了好久,今天终于解决了,如果你的myeclipse自动生成的添加hibernate3jar包时,依靠通常的方法是无法关联其相应版本的源代码的,就是你在编写代码是,按住ctrl + hibe ...

  4. JS/jQuery--iframe框架内外元素的操作（转）

    JS/jQuery--iframe框架内外元素的操作 原创 2017年12月07日 14:23:09 标签: js / iframe 28 两个问题: 如何在父页面操作iframe框架内的元素? 如何 ...

  5. 线段树教做人系列（1）HDU4967 Handling the Past

    题意:给你n组操作,分别为压栈,出栈,询问栈顶元素.每一组操作有一个时间戳,每次询问栈顶的元素的操作询问的是在他之前出现的操作,而且时间戳小于它的情况.题目中不会出现栈为空而且出栈的情况. 例如: p ...

  6. Jtabbedpane设置透明、Jpanel设置透明

    摘自 https://zhidao.baidu.com/question/983204331427010139.html java中如何设置Jtabbedpane为透明 20 在Jtabbedpane ...

  7. HttpServletRequest和ServletRequest的区别.RP

    问题: 请问HttpServletRequest和ServletRequest的区别? 回答: servlet理论上可以处理多种形式的请求响应形式 http只是其中之一 所以HttpServletRe ...

  8. NETTY4中的BYTEBUF 内存管理

    转 http://iteches.com/archives/65193 Netty4带来一个与众不同的特点是其ByteBuf的重现实现,老实说,java.nio.ByteBuf是我用得很不爽的一个AP ...

  9. ubuntu 12.04 （64位）下安装oracle 11g过程及问题总结

    最近公司用到oracle,在ubuntu64位安装了一下,碰到了一些问题,在网上搜索到了一些答案,在此作为笔记记录下来. 1.首先下载oracle并解压不再赘述. 2.安装依赖包 sudo apt-g ...

  10. js/jq基础（日常整理记录）-2-一个简单的js方法实现集合的非引用拷贝

    一.一个简单的js方法实现集合拷贝 做web项目的时候,少不了和js中的数组,集合等对象接触,那么你肯定会发现,在js中存在一个怪异的现象就是数组和集合的拷贝都是地址复制,并不是简单的数据的拷贝. 举 ...