组件中的路由


<router-link to=""></router-link>

无参数

<router-link to="/ar/1">测试一</router-link>
<router-link to="/ar/2">测试二</router-link>

与router1.x不同点

在vue-router2.x中使用<router-link的方式,v1.x中使用<a v-link="'/about'">About</a>

带参数

 <router-link to="/ar/1?id=1&age=22">测试一</router-link>
<router-link to="/ar/2?id=2&age=24">测试二</router-link>

在vue-devtools中可查看到所有的某个路由的所有信息:

路由的重定向

路由的重定向需要我们在路由文件中配置:

new Router({
...
{
path: '/ar',
name: 'ar',
component: Ar
},{
path: '/ar/1',
redirect: '/ar/2', // 配置redirect跳转到测试二
name: 'ar1',
component: Ar1
},{
path: '/ar/2',
name: 'ar2',
component: Ar2
}
]
})

注意:从图中看出,虽然路由发生了跳转,但是后面跟的参数并没有发生变化。

组件内的导航钩子

  • beforeRouteEnter(to, from, next) 进入路由时候触发

  • beforeRouteLeave(to, from, next) 离开路由时候触发

参数含义:

  • to: Route: 即将要进入的目标 路由对象
  • from: Route: 当前导航正要离开的路由
  • next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
  • next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
  • next(false): 中断当前的导航。如果浏览器的 URL 改变了(可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
  • next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

注意的点:在我写demo的时候发现,如果你在一个组件这么定义

...
beforeRouteEnter (to, from, next) { },
...

进入路由钩子中什么也不执行next()的话,会一直无法跳转到对应的路由

所以,建议一旦用了组件钩子,就一定不要忘记next!

路由钩子不同于router1.x

  • activate被替换为beforeRouteEnter
  • deactivate被移除,使用beforeDestroy 或者 destroyed 钩子作为替代。
  • canActivate被替换为beforeEnter
  • canDeactivate被替换为beforeRouteLeave

嵌套路由

需要嵌套的目录结构:

  • /ar (单独组件)
  • /ar/1 (单独组件)
  • /ar/2 (单独组件)

现在路由文件中配置:

 new Router({
routes: [
...
{
path: '/ar',
name: 'ar',
component: Ar,
children:[ // 在ar中添加children子路由
{
path: '1',
name: 'ar1',
component: Ar1
},
{
path: '2',
name: 'ar2',
component: Ar2
}
]
}
// ,{
// path: '/ar/1',
// name: 'ar1',
// component: Ar1
// },{
// path: '/ar/2',
// name: 'ar2',
// component: Ar2
// }
]
})

ar.vue文件:

<template>

    <div>
Ar下有两个嵌套的子路由
<router-link to="/ar/1?id=1&age=22">子路由一</router-link>
<router-link to="/ar/2?id=2&age=24">子路由二</router-link>
<router-view></router-view>
</div>
</template>

可见这个单文件中有两个router-view

vue-router2.x使用入门的更多相关文章

  1. 《vue.js2.0从入门到放弃》学习之路

    原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...

  2. Vue (一) --- vue.js的快速入门使用

    =-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...

  3. Vue.js2.0从入门到放弃---入门实例

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...

  4. Vue.js的从入门到放弃进击录(一)

    感谢我们项目组给机会,让我学了Vue.js,打开新世界大门...哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的.我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为 ...

  5. Vue.js的从入门到放弃进击录(二)

    哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...

  6. Vue项目中GraphQL入门学习与应用

    1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...

  7. 转-Vue.js2.0从入门到放弃---入门实例(一)

    http://blog.csdn.net/u013182762/article/details/53021374 标签: Vue.jsVue.js 2.0Vue.js入门实例Vue.js 2.0教程 ...

  8. Vue.js 十五分钟入门

    本文经授权转载,仅用于学习,版权归原作者所有. TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很 ...

  9. vue.js_01_vue.js的入门

    1.什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于 ...

  10. vue.js慢速入门(1)

    0.MVVM 什么是MVVM?就是Model-View-ViewModel. ViewModel是Vue.js的核心,它是一个Vue实例. 不太懂也没关系,慢慢就懂了. 1.基础示例 代码: < ...

随机推荐

  1. SpringCloud学习目录

    Spring Cloud直接建立在Spring Boot的企业Java创新方法上,它通过实现经过验证的模式来简化分布式.微服务风格的体系结构,从而为您的微服务带来弹性.可靠性和协调. 以上来自spri ...

  2. python 列表常用操作(二)

    1.tuple 的 unpack a,b = t 2.格式化输出 print('您的输入:{},值为{}',format(a,b)) 3.日期计算 import datetime as dt impo ...

  3. 在Node.js使用Promise的方式操作Mysql

    最近在学习Node.js,虽然早就听说了回调地狱结果过了一周就遇到了.所以花时间学习了了一下Promise.虽然还有Async/await.co.生成器等选择,但是因为本人基础较差,以及时间问题所以决 ...

  4. 虚幻开放日2017ppt

    虚幻开放日2017ppthttp://pan.baidu.com/s/1c1SbcKK 如果挂了QQ+378100977 call我

  5. (转)我是一个java class

    前言:本文主要想讲一下Java虚拟机的故事, 可能有点偏门,不妥之处欢迎留言交流. 第一回 陌生警察 我出生在C盘下面一个很深层次的目录下, 也不知道是谁把我放到这里的. 我一直在睡觉,外边的日出日落 ...

  6. C++学习笔记46:模板与群体数据

    函数模板 创建一个通用功能的函数,支持多种不同的形参:简化重载函数的函数体设计: 语法形式 template <模板参数表> 函数定义:模板参数表的内容:类型参数:class(或typen ...

  7. Flask CBV

    from flask import Flask, views import time app = Flask(__name__) def zhuangshiqi(func): def inner(*a ...

  8. HTML5 — 地理定位

    Geolocation:地理定位,获取当前浏览器所在的地理坐标信息(包括经度.纬度.海拔高度.移动速度),实现LBS应用(Location Based Service)——基于定位的服务,如订   餐 ...

  9. vim设置一个tab为4个空格,设置行号

    这我就再当前用户下,不是root权限.本身是没有.vimrc这个文件的 vim  ~/.vimrc 新建了这个文件 然后在其中输入 保存. 这样设置完就一个tab是4个空格,并且就有行号了.重新打开v ...

  10. vue事件对象、冒泡、阻止默认行为

    事件对象: <input type="button" name="" value="按钮" @click="show($ev ...