<!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. ajax补充FormData

    一.回顾上节知识点 1.什么是json字符串? 轻量级的数据交换格式 2.定时器:关于setTimeout setTimeout(foo,3000)  # 3000表示3秒,foo表示一个函数,3秒后 ...

  2. LNMP 1.3 测试php解析

    测试解析LNMP的php解析 先打开nginx的配置文件 vim /usr/local/nginx/conf/nginx.conf location ~ \.php$ { root html; fas ...

  3. JS中,根据div数值判断弹出窗口

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. 记录一次从txt文件导入数据的python下的MySQL实现

    环境: python2.7 ComsenzXP自带MySQL 安装python-MySQL模块 数据格式:txt格式的账号信息. 数据一行一条数据. 难点:有的行只有账号,没有密码:有的为空行:有的行 ...

  5. sort排序应用

      private static int SortTestObj2Compare(TestSortClass obj1, TestSortClass obj2)        {            ...

  6. springmvc 处理器方法返回的是modelandview 重定向到页面

  7. windows 获取本机(全部)IPv4、IPv6、MAC地址方法 (C/C++)

    windows下获取IP地址的两种方法: 一种可以获取IPv4和IPv6,但是需要WSAStartup: 一种只能取到IPv4,但是不需要WSAStartup: 如下: 方法一:(可以获取IPv4和I ...

  8. oracle DCL-(grant、revoke )

    1.授权GRANT <权限列表> to <user_name>; 2.收回权限REVOKE <权限列表> from <user_name>

  9. Camera 3D概念

    1. integration time即积分时间是以行为单位表示曝光时间(exposure time)的,比如说INT TIM为159,就是指sensor曝光时间为159行,两者所代表的意思是相同的, ...

  10. python 获取路径不同方法的比较

    在软件中经常需要获取文件所在路径,方法有很多种( 例如 os.path.realpath(__file__), os.getcwd(), os.path.abspath(__file__),  sys ...