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