一.先介绍一下路由的七大守卫
1.全局守卫
(1)beforeEach 前置守卫 进入路由之前候触发
(2)beforeResolve 解析守卫 解析路由的时候触发
(3)beforeafterEach 后置守卫 进入路由后触发
2.路由独享守卫
beforeEnter 路由独享守卫 路由独自享有的守卫
3.组件内的守卫
(1)beforeRouterEnter 进入路由前触发
(2)beforeRouteUpdate 动态路由的参数路径发生变化的时候
(3)beforeRouteLeave 路由离开的时候触发 :从A--->B就会触发
4.上述路由的参数的介绍:
1.总共有三个参数:
(1) to:到哪里去
(2)from:从哪里来
(3) next:表示是否通过
2.代码演示:
router.beforeEach((to, from, next) => {
if (to.path === '/a3') {
alert('请先登录在访问')
next(false)
} else {
next()
}
})
解析;这句话的意思是 如果去的是a3路径对应的页面,给出一个弹出要求请先登录在访问, next(false)禁止跳转,如果不是访问a3路径对应的页面那么就允许访问。
5.全局路由的执行顺序。
1.代码验证;
router.beforeEach((to, from, next) => {
console.log('全局前置守卫11111111111111111111111')
next()
})
router.beforeResolve((to, from, next) => {
console.log('全局解析守卫2222222222222222222222')
next()
})
router.afterEach((to, from, next) => {
console.log('全局后置守卫33333333333333')
})
图例:
得出结论:
在全局里面执行顺序是:
前置守卫>全局解析守卫>后置守卫
6. 不同组件之间的路由跳转流程图
- 导航被触发(A–>B)
- 调用A组件内路由守卫beforeRouteLeave(to,from,next)
- 调用全局路由前置守卫router.beforeEach(to,from,next)
- 调用B路由独享守卫 beforeEnter(to,from.next)
- 解析异步路由组件B
- 调用B的组件内路由守卫beforeRouteEnter(to,from,next)
- 调用全局路由解析守卫 router.beforeResolve(to,from,next)
- 导航被确认
- 调用全局路由钩子router.afterEach(to,from)
- 渲染B组件DOM
图示:
解析;从A组件-------->B组件的过程,离开A组件调用了 组件内的守卫beforeRouterLeave,进入B组件开启全局的前置守卫,beforeEach, 在开启路由独享守卫beforeEnter ,然后再调用B组件内的beforeRouterEnter, 全局的解析守卫, 后置守卫。
7.路由的传参编程式传参(params query)
(1)通过name属性来出传递参数
index.JS文件
{
path: 'a2',
name: 'a2',
component: () => import('../views/a2.vue')
}
触发:
this.$router.push({ name: 'a2', params: { userId: 123 } })
接收:
{
{ $route.params.userId }}
注意点;是$route,不是router,userId是参数名字。
(2)通过在后面拼接参数进行查找
index.JS文件下
{
// name是参数名
path: '/a2/:name',
name: 'a2',
component: () => import('../views/a2.vue')
}
解析:path路径上 name代表是参数的名字
跳转的页面:
<template>
<div class="">
<button @click="fn">点击跳转到a2页面</button>
<router-view></router-view>
</div>
</template>
methods: {
fn () {
this.$router.push('/a2/' + '张三')
}
}
解析: 点击按钮跳转页面并且传递值'张三'过去
接收:
{
{ $route.params.name }}
(3)通过query来接收的传参
<button @click="fn">点击跳转到a2页面</button>
methods: {
fn () {
this.$router.push('/a2?name=zs&age=20')
}
}
解析:在a2对应的组件中传递了2个参数分别是name=zs ,age=20。
接收的页面:
<h1>{
{ $route.query.name }}</h1>
<h2>{
{ $route.query.age }}</h2>
通过query来接收传递过来的参数,注意$route.query.参数名。