vue3 监听路由变化的方式——《项目小记》
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes:Array<RouteRecordRaw> = [
{
path:'/',
redirect:'/home',
},
{
path:'/home',
name:'home',
component: ()=>import("../views/"),
meta:{
title:'首页'
},
// 单个路由内路由守卫
beforeEnter((to,from,next) => {
console.log(to,from)
next()
}）
},
{
path:'/find',
name:'find',
component: ()=>import("../views/"),
meta:{
title:'发现'
}
},
]
const router = createRouter({
// 指定路由模式
history: createWebHistory(),
// 路由地址
routes: routes
})
// 全局守卫
// 前置守卫————执行前，一般验证用户是否登入，token验证
router.beforeEach((to,from,next) => {
document.title = '一个' + '——' + to.meta.title //设置当前页的title
console.log(to,from);
// next('/login') next({name:'login'})
next()
})
// 解析守卫————解析前,在导航解析完之前执行，所有的异步路由组件加载完成及组件内守卫执行之后
// 用途可以设置访问页面时，可设置不同的基础域名
router.beforeResolve((to,from,next)=> {
console.log(to,from);
// next({name:'home'})
next()
// return false
})
// 后置守卫————路由变化执行后，不能阻止页面跳转
router.afterEach((to,from,failure) => {
console.log(to,from,failure);
})
export default router