路由守卫
路由守卫用来通过跳转或取消的方式守卫导航。每个守卫方法接收三个参数(to,from,next)
to:即将要进入的路由对象
from:即将离开的路由对象
next:可选。回调函数,确保导航继续进行(中断传false,也可重定向其他路由,如:next(‘/login’))
- 全局路由
beforeEach:全局前置守卫。路由切换前操作。
beforeResolve:全局解析守卫。在导航被确认之前、在路由组件解析渲染之前、所有组件内守卫和异步路由组件被解析之后调用。
afterEach:全局后置钩子。路由切换后执行。
import { createRouter} from "vue-router";
const router = createRouter({ ... })
router.afterEach((to, from) => {
if (to.meta.title) {
document.title = to.meta.title;
}
});
- 路由独享
beforeEnter:进入路由时触发。在特定路由上定义的守卫,用于对该路由的局部拦截、验证或重定向。
const routes = [
{
path: '/users/:id',
component: () => import("../view/index.vue"),
beforeEnter: (to, from) => {
// reject the navigation
return false
},
},
]
- 组件内路由
beforeRouteEnter:在渲染该组件的对应路由被验证前调用。不能获取组件实例 `this` ,因为当守卫执行时,组件实例还没被创建。
beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用。举例来说,对于一个带有动态参数的路径 `/users/:id`,在 `/users/1` 和 `/users/2` 之间跳转的时候,由于会渲染同样的`UserDetails` 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。因为在这种情况发生的时候,组件已经挂载好了,导航守卫可以访问组件实例 `this`。
beforeRouteLeave:在导航离开渲染该组件的对应路由时调用。它可以访问组件实例 `this`。
<template>
<h2>我是内容</h2>
</template>
<script>
export default {
name:'Index',
/* mounted() {
window.aboutRoute = this.$route
window.aboutRouter = this.$router
}, */
mounted() {
// console.log(,this.$route)
},
//通过路由规则,进入该组件时被调用
beforeRouteEnter (to, from, next) {
next()
},
//通过路由规则,离开该组件时被调用
beforeRouteLeave (to, from, next) {
next()
}
}
</script>
路由传参
params传参(不显示参数)指的是, 可以在url路径上不显示参数, 因为配置路由的时候我们不需要在路径上写东西来承接params。这种传参只能通过路由别名name作为指定对象,不能使用路由路径path。