组件中的路由


<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. zoj 1002 Fire Net 碉堡的最大数量【DFS】

    题目链接 题目大意: 假设我们有一个正方形的城市,并且街道是直的.城市的地图是n行n列,每一个单元代表一个街道或者一块墙. 碉堡是一个小城堡,有四个开放的射击口.四个方向是面向北.东.南和西.在每一个 ...

  2. Linux上的文件查找工具之locate与find

    前言 Linux上提供了两款工具用于查找文件,一款是locate,另一款是find. locate的特点是根据已生成的数据库查找,速度较快,但是查找的是快照数据,不准确. 因此在日常使用中,为了准确性 ...

  3. Mysql8.0升级后,Navicat连接报错caching_sha2_password 问题

    需要重新配置加密规则 ALTER USER 'root'@'localhost' IDENTIFIED BY 'password' PASSWORD EXPIRE NEVER; ALTER USER ...

  4. SpringBoot使用WebFlux响应式编程操作数据库

    这一篇文章介绍SpringBoot使用WebFlux响应式编程操作MongoDb数据库. 前言 在之前一篇简单介绍了WebFlux响应式编程的操作,我们在来看一下下图,可以看到,在目前的Spring ...

  5. iOS12系统应用发送普通邮件构建邮件

    iOS12系统应用发送普通邮件构建邮件 当确定设备支持邮件发送功能后,开发者就可以实现该功能.根据是否包含附件,邮件可以分为普通邮件和附件邮件两种.本节首先讲解如何发送普通邮件.实现过程如下: 1.构 ...

  6. GitHub用法

    注意: 在push之前要先git pull origin融合代码使得本地代码版本更新,从而才能进行push!! 详细内容参见->这里 本篇内容转自->这里 作者:知乎用户链接:https: ...

  7. LINUX文件及目录管理命令基础

    Linux命令行组成结构 Linux命令结构 在Linux中一切皆文件,一切皆命令! 命令提示符: [root@tt ~]# [xiaohui@tt ~]$ Linux命令行常用快捷键 ctrl + ...

  8. BZOJ2268 : Wormly

    考虑头部,一定是能向前就向前,因此是最左边的腿往右$b-1$个位置. 头部移动之后,腿部就要相应地移动到区间内最靠右的$l$个$1$之上. 若头部和腿部都不能移动,检查是否到达终点即可. 用前缀和以及 ...

  9. 考前停课集训 Day5 累

    Day 5 今天不考试 因此自己订正+刷题 我就当日记来写吧 昨天棕名了…… 所以借了同学的号打题 NOIP前的崩心态啊QAQ 希望一切安好

  10. ironic-inspector硬件信息收集

    主机上报 ironic-inspector流程会在小系统里收集裸机的硬件信息,然后上报到ironic-conductor. 其中收集硬件信息主要使用hwinfo和lshw命令.Centos可以使用如下 ...