Vue全局后置守卫

  全局后置守卫

一、在 router 目录下的 index.js 文件中配置全局后置守卫。

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Login from '../views/Login.vue'const routes = [{path: '/',name: 'home',component: Home,// 自定义信息，title为页面名称meta:{ title:"首页" }},{path: '/about',name: 'about',component: About,// 自定义信息，title为页面名称meta:{ title:"关于我们" }},{path: '/login',name: 'login',component: Login}
]const router = new VueRouter({routes
})// 全局后置守卫
// 初始化时执行、每次路由切换后执行
router.afterEach((to,from) => {if(to.meta.title){// 修改网页的标题document.title = to.meta.title;}else{document.title = "管理系统";}
})export default router

 注：全局后置守卫没有 next 方法，因为已经进入某个页面了，不需要再放行。

二、全局后置守卫总结

router.afterEach((to,from) => {// 进入页面后的操作...
})

原创作者：吴小糖

创作时间: 2023.8.24