路由Vue-router 的使用总结
1、关于 router-view 匹配
vue 项目使用 vue-router,所有的根级别的路由都是在 App.vue 文件中的 router-view 中渲染的。比如下面的 path: '/' 、path: '/home' 路径匹配到的组件都是在 App.vue 文件下的 router-view 中进行渲染。
其他级别的路径在对应的父组件的 router-view 中进行渲染。
// App.vue
<div id="app">
<router-view/>
</div> // 路由文件
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
children: [
{
path: 'item01',
name: 'Item01',
component: Item01
}
]
},
{
path: '/home',
name: 'Home',
component: Home
}
]
2、导航守卫
利用导航守卫可以在路由发生变化时进行某些操作。导航守卫分为:全局守卫、路由独享守卫、组件内守卫
示例:
const router = new VueRouter({ ... }) //全局前置守卫
router.beforeEach((to, from, next) => {
// ...
})
每个守卫方法接收三个参数:
to: Route
: 即将要进入的目标 路由对象from: Route
: 当前导航正要离开的路由next: Function,
一定要调用该方法来 resolve 这个钩子。执行效果依赖next
方法的调用参数。next()
: 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。next(false)
: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到from
路由对应的地址。next('/')
或者next({ path: '/' })
: 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。你可以向next
传递任意位置对象,且允许设置诸如replace: true
、name: 'home'
之类的选项以及任何用在router-link
的to
prop 或router.push
中的选项。next(error)
: (2.4.0+) 如果传入next
的参数是一个Error
实例,则导航会被终止且该错误会被传递给router.onError()
注册过的回调。
必须确保要调用 next
方法,否则钩子就不会被 resolved,即路由不会跳转。
2.1、全局守卫
2.1.1、全局前置守卫(router.beforeEach())
你可以使用 router.beforeEach
注册一个全局前置守卫
const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => {
// ...
})
//守卫可以有多个
router.beforeEach((to, from, next) => {
// ...
})
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中。
2.1.2、全局解析守卫
在 2.5.0+ 你可以用 router.beforeResolve
注册一个全局守卫。这和 router.beforeEach
类似,区别是在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被调用。
2.1.3、全局后置守卫
你也可以注册全局后置钩子,然而和守卫不同的是,这些钩子不会接受 next
函数也不会改变导航本身:
router.afterEach((to, from) => {
// ...
})
2.2、路由独享守卫
你可以在某个路由配置上直接定义 beforeEnter
守卫,这些守卫与全局前置守卫的方法参数是一样的。
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
2.3、组件内守卫
2.3.1、前置守卫(beforeRouteEnter()
)
在渲染该组件的对应路由被 confirm 前调用。注意:该守卫内部不能获取组件实例 `this` ,因为该守卫是在导航确认前被调用,此时组件还没被创建。
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
//...
}
}
要想在该守卫内部访问组件实例,可以给 next传一个回调函数,
在导航被确认的时候执行回调,并且把组件实例作为 next 回调函数的参数,此时就可以访问组件实例了。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
beforeRouteEnter
是唯一支持给 next
传递回调的守卫。因为其他守卫比如 beforeRouteUpdate
和 beforeRouteLeave
,this
已经可用了,所以没有必要支持传递回调。
2.3.2、路由改变不跳转时的守卫(beforeRouteUpdate
()
)
在当前路由改变,但是该组件被复用时调用。
比如,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候该守卫会被触发。由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
该守卫可以访问组件实例 `this`。
const Foo = {
template: `...`,
beforeRouteUpdate (to, from, next) {
// ...
this.xxx = to.xxx
next();
}
}
2.3.3、后置守卫(beforeRouteLeave
()
)
该守卫在导航离开该组件的对应路由时调用。可以访问组件实例 `this`。
const Foo = {
template: `...`,
beforeRouteLeave (to, from, next) {
// ...
this.xxx = xxx;
next();
}
}
这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false)
来取消。
beforeRouteLeave (to, from , next) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
if (answer) {
next()
} else {
next(false)
}
}
2.4、完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用离开守卫。
- 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 用创建好的实例调用
beforeRouteEnter
守卫中传给next
的回调函数。
3、meta 元信息的妙用
路由可以配置 meta 选项来备注路由的一些信息,利用这个元信息可以实现一些比较巧妙的功能。可以参考:https://www.bbsmax.com/A/A7zglW41J4/
路由Vue-router 的使用总结的更多相关文章
- Vue.js 2.x笔记:路由Vue Router(6)
1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...
- 六、vue路由Vue Router
一.基本概念 route, routes, router 1, route,它是一条路由,由这个英文单词也可以看出来,它是单数, Home按钮 => home内容, 这是一条route, a ...
- Vue技术点整理-Vue Router
路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 vue-router 库 一,Vue Router 在项目中的安装引用 1,在页面中使用 ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue router 全局路由守卫
记录一下全局路由守卫的使用: 方法一:定义一个数组用于检测与管理需要登录的页面,全局路由守卫配合本地存储判断是否跳转 import Vue from 'vue' import Router from ...
- Vue router 一个路由对应多个视图
使用命名路由 https://jsfiddle.net/posva/6du90epg/ <script src="https://unpkg.com/vue/dist/vue.js&q ...
- vue.js利用vue.router创建前端路由
node.js方式: 利用node.js安装vue-router模块 cnpm install vue-router 安装完成后我们引入这个模板! 下载vue-router利用script引入方式: ...
- [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制
一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)
一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...
随机推荐
- JS备忘--子父页面获取元素属性、显示时间,iframe之间互相调用函数
//页面加载完成后执行 $(function () { getHW();}); //当用户改变浏览器大小改变时触发 $(window).resize(function () { setHW(); }) ...
- 006-unity3d GUI初识、贴图、自定义鼠标指针
一.gui概念 无论摄像机拍摄到的图像怎么变换,GUI永远显示在屏幕上,不受变形.碰撞.光照的影响.对话框.战斗值.能量等.示例:用手机录像,摄像的参数不会随着拍摄场景变换.GUI基础GUI部分是每帧 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_07-网络编程_第4节 模拟BS服务器案例_2_模拟BS服务器代码实现
这三行代码是固定的在输出之前 浏览器再次访问这个页面. 图片没有显示出来 复制刚才的代码一份出来重命名 加个while循环.把代码都放进去. 然后在while里面开启一个线程.把读取的代码都放在线程里 ...
- 44 答疑(三)--join的写法/Simple nested loop join的性能问题/Distinct和group by的性能/备库自增主键问题
44 答疑(三) Join的写法 35节介绍了join执行顺序,加了straight_join,两个问题: --1 如果用left join,左边的表一定是驱动表吗 --2 如果两个表的join包含多 ...
- request.getParameter
request.getParameter(),该API针对的是 form表单entype的值为 application/x-www-form-urlencoded(默认值), 或者参数跟在地址栏上us ...
- discover面试
电话面 英语 20191009 面试我的是一个小姐姐,她是数据挖掘分析师,声音很甜很好听.全程英文 (1)please introduce yourself in two minutes (2)我对你 ...
- pyenv python 版本控制
经常遇到这样的情况: 系统自带的Python是2.x,自己需要Python 3.x,此时需要在系统中安装多个Python,但又不能影响系统自带的Python,即需要实现Python的多版本共存,pye ...
- Nacos 配置中心原理分析
我们从原生SDK代码中入手,可以发现最核心的两行代码: ConfigService configService=); 首先我们先来看 NacosFactory.createConfigService ...
- JVM调优 dump文件怎么生成和分析
1.获取JVM的dump文件的两种方式 1. JVM启动时增加两个参数: #出现 OOME 时生成堆 dump: -XX:+HeapDumpOnOutOfMemoryError #生成堆文件地址: - ...
- 看漫画就能学SQL,简直太cool了
对于SQl, 很多人学不会的原因是从一开始就没明白,学这东西能干啥,学会了能有什么用.甚至有些人不知道'SQL'应该怎么读,以至于一开始兴致勃勃,但是学到一半放弃了. 注意:'sql'真的不能读成'烧 ...