vue-router2.x使用入门
组件中的路由
<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使用入门的更多相关文章
- 《vue.js2.0从入门到放弃》学习之路
原文地址: Vue.js2.0从入门到放弃---入门实例(一):http://blog.csdn.net/u013182762/article/details/53021374 Vue.js2.0从入 ...
- Vue (一) --- vue.js的快速入门使用
=-----------------------------------把现在的工作做好,才能幻想将来的事情,专注于眼前的事情,对于尚未发生的事情而陷入无休止的忧虑之中,对事情毫无帮助,反而为自己凭添 ...
- Vue.js2.0从入门到放弃---入门实例
最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用 ...
- Vue.js的从入门到放弃进击录(一)
感谢我们项目组给机会,让我学了Vue.js,打开新世界大门...哈哈哈,也没有那么夸张,不过学下来确实觉得入门还是蛮容易的.我大概前前后后学了有一个月的样子,一开始只是比较急着可以写东西出来,后来因为 ...
- Vue.js的从入门到放弃进击录(二)
哇塞,昨晚更新的篇(一)这么多阅读量,看来入坑的人越来越多啦~熬了一个礼拜夜,今天终于生病惹~国庆要肥家咯·所以把篇(二)也更完.希望各位入坑的小伙伴能少跳几个坑呗.如果有什么不对的地方也欢迎讨论指正 ...
- Vue项目中GraphQL入门学习与应用
1.GraphQL是什么,能干什么? 正如官网所说,GraphQL是一种用于API查询的语言.Facebook 的移动应用从 2012 年就开始使用 GraphQL.GraphQL 规范于 2015 ...
- 转-Vue.js2.0从入门到放弃---入门实例(一)
http://blog.csdn.net/u013182762/article/details/53021374 标签: Vue.jsVue.js 2.0Vue.js入门实例Vue.js 2.0教程 ...
- Vue.js 十五分钟入门
本文经授权转载,仅用于学习,版权归原作者所有. TypeScript 为 JavaScript 带来静态类型检查,让 JavaScript 编写中大型应用的时候可以应用工具来避免部分错误. Vue 很 ...
- vue.js_01_vue.js的入门
1.什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站,还可以开发手机App, Vue语法也是可以用于进行手机App开发的,需要借助于 ...
- vue.js慢速入门(1)
0.MVVM 什么是MVVM?就是Model-View-ViewModel. ViewModel是Vue.js的核心,它是一个Vue实例. 不太懂也没关系,慢慢就懂了. 1.基础示例 代码: < ...
随机推荐
- SpringCloud学习目录
Spring Cloud直接建立在Spring Boot的企业Java创新方法上,它通过实现经过验证的模式来简化分布式.微服务风格的体系结构,从而为您的微服务带来弹性.可靠性和协调. 以上来自spri ...
- python 列表常用操作(二)
1.tuple 的 unpack a,b = t 2.格式化输出 print('您的输入:{},值为{}',format(a,b)) 3.日期计算 import datetime as dt impo ...
- 在Node.js使用Promise的方式操作Mysql
最近在学习Node.js,虽然早就听说了回调地狱结果过了一周就遇到了.所以花时间学习了了一下Promise.虽然还有Async/await.co.生成器等选择,但是因为本人基础较差,以及时间问题所以决 ...
- 虚幻开放日2017ppt
虚幻开放日2017ppthttp://pan.baidu.com/s/1c1SbcKK 如果挂了QQ+378100977 call我
- (转)我是一个java class
前言:本文主要想讲一下Java虚拟机的故事, 可能有点偏门,不妥之处欢迎留言交流. 第一回 陌生警察 我出生在C盘下面一个很深层次的目录下, 也不知道是谁把我放到这里的. 我一直在睡觉,外边的日出日落 ...
- C++学习笔记46:模板与群体数据
函数模板 创建一个通用功能的函数,支持多种不同的形参:简化重载函数的函数体设计: 语法形式 template <模板参数表> 函数定义:模板参数表的内容:类型参数:class(或typen ...
- Flask CBV
from flask import Flask, views import time app = Flask(__name__) def zhuangshiqi(func): def inner(*a ...
- HTML5 — 地理定位
Geolocation:地理定位,获取当前浏览器所在的地理坐标信息(包括经度.纬度.海拔高度.移动速度),实现LBS应用(Location Based Service)——基于定位的服务,如订 餐 ...
- vim设置一个tab为4个空格,设置行号
这我就再当前用户下,不是root权限.本身是没有.vimrc这个文件的 vim ~/.vimrc 新建了这个文件 然后在其中输入 保存. 这样设置完就一个tab是4个空格,并且就有行号了.重新打开v ...
- vue事件对象、冒泡、阻止默认行为
事件对象: <input type="button" name="" value="按钮" @click="show($ev ...