以 / 开头的嵌套路径会被当作根路径。

<router-link>

在vue-router1.X中是以<a v-link=""></a>存在的

里面的参数:

  to:代表跳转的目的地,渲染成<a href="">  后面目的地有下面几种表示法

    to引导(不用解析)     to="/home"  字符串路径

    :to引导(需要解析)   :to=" 'home' "     :to="{ path: 'home' }" path路径         :to="{ name: 'user' }" 具名路径

  tag:把默认的a标签可以自由指定

    如 tag="li"  ,就是把渲染后的标签变为<li></li>          <router-link to="/foo" tag="li">foo</router-link>          -- 渲染结果 -->     <li>foo</li>

  replace:   设置 replace 属性的话,导航后不会留下 history 记录       <router-link :to="{ path: '/abc'}"   replace></router-link>       调用 router.replace() ———>来代替 router.push()

  append:  设置 append 属性后,则在当前(相对)路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b   <router-link :to="{ path: 'relative/path'}" append></router-link>

  active-class: 默认值: "router-link-active" 链接激活时使用的 CSS 类名,在全局初始化的时候配置;

js内部写的编程式导航:

  router.push () :   这个方法会向 history 栈添加一个新的记录,可以通过浏览器自带的后退,回到之前的url,等于<router-link :to="...">

  router.replace(); 相当于<router-link :to="..." replace> 跟 router.push 很像,唯一的不同就是,它不会向 history 添加新记录,而是跟它的方法名一样 —— 替换掉当前的 history 记录。

  router.go(n): 其中n代表的整数,相当于window.history.go(n)  router.go(1)相当于router.forward()     router.go(-1) 相当于router.back() 

路由信息对象的属性:    route object 是 不可变的,每次成功的导航后都会产生一个新的对象。

  $route.path  类型: string  字符串,对应当前路由的路径,总是解析为绝对路径,如 "/foo/bar"

  $route.params  类型: Object  一个 key/value 对象,包含了 动态片段 和 全匹配片段,如果没有路由参数,就是一个空对象。

  $route.query  类型: Object 一个 key/value 对象,表示 URL 查询参数。例如,对于路径 /foo?user=1,则有 $route.query.user == 1,如果没有查询参数,则是个空对象。

  $route.hash  类型: string  当前路由的 hash 值 (不带 #) ,如果没有 hash 值,则为空字符串。

  $route.fullPath  类型: string  完成解析后的 URL,包含查询参数和 hash 的完整路径。

  $route.matched  类型: Array  就是new VueRouter({ routes: [] })中的routes的数组

  $route.name  当前路由的名称,如果有的话

router下面有个app的属性,是APP.vue中template中的所有,也就是挂接到index中id=“app”的dom

vue2.X的路由的更多相关文章

  1. 【面试题】Vue2动态添加路由 router.addRoute()

    Vue2动态添加路由 点击打开视频讲解更加详细 场景: 一般结合VueX和localstorage一起使用 router.addRoutes vue-router4后 已废弃:使用 router.ad ...

  2. Vue2.X的路由管理记录之 钩子函数(切割流水线)

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...

  3. vue2.0配置路由

    配置路由之前,先检查vue版本,(案例适用vue2.0) 采用npm包的形式进行安装. 安装路由依赖:npm install vue-router(代码中,如果在一个模块化工程中使用它,必须要通过 V ...

  4. Vue2.X的路由管理记录之 钩子函数(切割流水线)2

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化) 它. 导航和钩子函数: 导航:路由正在发生 ...

  5. Vue2.0实现路由

    Vue2.0和1.0实现路由的方法有差别,现在我用Vue 2.0实现路由跳转,话不多说,直接上代码 HTML代码 <div class="tab"> <route ...

  6. (转)Vue2.X的路由管理记录之 钩子函数(切割流水线)

    $route可以在子组件任何地方调用,代表当前路由对象,这个属性是只读的,里面的属性是 immutable(不可变) 的,不过你可以 watch(监测变化)它. 导航和钩子函数: 导航:路由正在发生改 ...

  7. vue2.0:(五)、路由vue-router

    好的,接下来,我们来写路由.用的是vue2.0的路由. 步骤一:配置main.js import Vue from 'vue'; import App from './App'; import rou ...

  8. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

  9. Vue2.2版本学习小结

    一.项目初始化继续参考这里 https://github.com/vuejs-templates/webpack-simple 或者 https://github.com/vuejs-template ...

随机推荐

  1. Eclipse运行时发生An internal error occurred during:“**************” 的解决办法

    2015-05-20 原因分析: 当前工作目录下的 .project 文件 不一致 例如1: 南京大学 Mooctest 提交考试试卷时出现的:An internal error occurred d ...

  2. 利用phpcms后台漏洞渗透某色情网站

    本文来源于i春秋学院,未经允许严禁转载 phpcms v9版本最近爆了好几个漏洞,网上公开了不少信息,但没有真正实战过,就不能掌握其利用方法,本次是在偶然的机会下,发现一个网站推荐楼凤信息,通过分析, ...

  3. Javascript高级编程学习笔记(2)—— Script标签

    script标签 js在浏览器中的使用,肯定会涉及到script标签. 那么script标签有哪些属性呢? 1.async:异步加载(不让页面等待该脚本的加载执行,异步加载页面的其他部分) 2.cha ...

  4. 用react+redux写一个todo

    概述 最近学习redux,打算用redux写了一个todo.记录下来,供以后开发时参考,相信对其他人也有用. 代码 代码请见我的github 组织架构如下图:

  5. 《机器学习实战(基于scikit-learn和TensorFlow)》中英文资源+源码 下载

     https://pan.baidu.com/s/1iTIoa4RXdK-lo_QEgLEOFw  提取码:76hf 

  6. CentOS 配置SOCKS5代理服务

    SOCKS5 是一个代理协议,它在使用TCP/IP协议通讯的前端机器和服务器机器之间扮演一个中介角色,使得内部网中的前端机器变得能够访问Internet网中的服务器,或者使通讯更加安全 通过yum安装 ...

  7. 谈谈 JavaScript 的正则表达式

    一.背景 最近在做 CMS 系统中不同身份登录用户的权限管理,涉及到对 api 路径的识别去判断是否放行.以前对正则表达式都是敬而远之,要用到的话都是直接复制粘贴现成网上的表达式,看也看不太懂,借这次 ...

  8. javascript History对象属性和方法

    History对象 History对象包含用户(在浏览器窗口中)访问过的URL length: 返回浏览器历史列表中的URL数量(打开浏览器,访问淘宝,返回1,再访问百度,返回2) History对象 ...

  9. Linux - history命令的常用方法

    history命令 打印所有命令记录:history 打印最近10条记录:history 10 执行第123条命令记录:!123 重复执行上一条命令:!! 执行最后一次以ls开头的命令:!ls 逐屏列 ...

  10. Xamarin.Android 使用SoundPool进行音频播放

    一.引入命名空间 using Android.Media; 二.声明变量 SoundPool soundPool; int soundPoolId; 三.实例化对象 soundPool = new S ...