路由守卫 设置页面标题

 

路由里添加meta属性

{
    
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
//元数据
    meta: {
      title: '首页',
    },
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})
// 必须在 router 赋值后才能用
// beforeEach: 路由的全局前置 守卫
// 可以理解成: 中间件, 拦截器...
// 会在任意路由发生切换操作时, 自动触发
router.beforeEach((to, from, next) => {
  // 固定3个参数:
  // to: 要跳转到哪
  // from: 现在在哪
  // next: 是否允许跳转
 
  // 获取自定义的title属性:
  const title = to.meta.title
  // 设置为 标签栏的题目
  document.title = title

  next() //放行操作: 必须调用 路由才能继续运行
})

export default new Vuex.Store({
  state: {
    imgURL: 'http://www.codeboy.com:9999/mfresh/',
    user: null,
    cartData: null,
  },
  mutations: {
    
    updateUser(state, user) {
      state.user = user
    },
  },

// 全局路由守卫
router.beforeEach((to, from, next) => {
  // 如果要前往的是 购物车, 即 Cart, 则要求必须是登录状态
  // 登录状态看 vuex 的 user
  // 在.vue文件中:  this.$store.state.user 来读取
  // 当前在 .js 文件中
  if (to.name == 'Cart' && store.state.user == null) {
    //强制回到首页
    next('/') //强制下一页的路径为 /  即首页

    alert('购物车页面必须登录后才能访问!!!')
    return //终止代码执行, 让后续的next不执行就不会跳转
  }
  // 用即将前往的页面的 标题 作为 标签的标题
  document.title = to.meta.title

  // 触发next 路由才能继续进行
  next()
})

设置页面标题的时候 后置路由守卫比较好  前置有bug 进主页刷新标题显示undefinde  页面设置权限 没权限的时候 页面title也会改变 或者 解决：写两次 document.title=to.meta.title

 

独享路由守卫

组件路由守卫

组件路由守卫就是在组件内执行的钩子函数，类似于组件内的生命周期钩子函数按执行顺序为beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave三个。

beforeRouteEnter (to, from, next) {
  // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  next(vm => {})
}
beforeRouteUpdate (to, from, next) {
  // 同一页面，刷新不同数据时调用，
}
beforeRouteLeave (to, from, next) {
  // 离开当前路由页面时调用
}

 [beforeRouteEnter]：路由进入之前调用，参数包括to，from，next。该钩子函数在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用。

[beforeRouteUpdate] ：在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。参数包括to，from，next。当前路由query变更时，该守卫会被调用

[beforeRouteLeave]：导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。

 

原文 详情地址

Vue路由守卫（导航守卫）及使用场景_Anastasia..的博客-CSDN博客_路由守卫vue使用场景目录前言一、路由守卫是什么？二、路由守卫全解析先来看一下钩子函数执行后输出的顺序吧1.全局路由守卫2.组件路由守卫3.路由独享守卫单独介绍一下路由守卫钩子三个参数前言最近在学习vue路由守卫，感觉路由守卫这里知识点挺多的，来做个小笔记。一、路由守卫是什么？路由守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。可以简单的理解为一座房子的门口的保安，想要进入这个房子就必须通过保安的检查，要告诉路.https://blog.csdn.net/m0_65558076/article/details/122211768