查漏补缺——解释一下这段路由代码啥意思

问题

如题所示

答案

相关源码：

router.beforeEach((to, from, next) => {
  let title = '黄子涵'
  if (to.meta.params){
      title = `${to.meta.title}:${to.params[to.meta.params] || ''} - ${title}`
  }else {
      title = `${to.meta.title} - ${title}`
  }
  document.title = title
  if (to.path !== from.path) {
      store.dispatch('hzhSetLoading', true);
  }
  next();
})
 
router.afterEach((to, from) => {
  // 最多延迟 关闭 loading
  setTimeout(() => {
      store.dispatch('hzhSetLoading', false);
  }, 1500)
})

router.beforeEach((to, from, next)

vue Router 路由守卫之beforeEach

router.beforeEach((to, from, next)

这个路由前置守卫，它有三个参数to, from, next，to表示的要将要跳转到的路由，from是跳转路由本身。

let title = '黄子涵'
  if (to.meta.params){
      title = `${to.meta.title}:${to.params[to.meta.params] || ''} - ${title}`
  }else {
      title = `${to.meta.title} - ${title}`
  }
  document.title = title

这段代码要结合下面的代码一起看：

const routes = [
  {
          path: '/',
         name: 'hzhHome',
          component: () => import('@/views/hzhHome.vue'),
           meta: { title: '首页' }
        },
        {
          path: '/hzhCategory/:hzhCate',
          name: 'hzhCategory',
          component: () => import('@/views/hzhHome.vue'),
          meta: { title: '分类',params: 'hzhCate'}
        },
         {
           path: '/hzhSearch/:hzhWords',
           name: 'hzhSearch',
           component: () => import('@/views/hzhHome.vue'),
           meta: { title: '搜索', params: 'hzhWords'}
         },
         {
          path: '/hzhAbout',
           name: 'hzhAbout',
          component: () => import('@/views/hzhAbout.vue'),
          meta: { title: '关于' }
         },
         {
           path: '/hzhFriend',
           name: 'hzhFriend',
           component: () => import('@/views/hzhFriend.vue'),
           meta: { title: '友链' }
         },
         {
           path: '/hzhArticle/:id',
           name: 'hzhArticle',
           component: () => import('@/views/hzhArticles.vue'),
           meta: { title: '文章' } 
         }
]

if (to.meta.params)

所以这个代码的含义是判断将要跳转的路由对象的meta属性的params属性为true，也就是为params: 'hzhCate'和params: 'hzhWords'，也就是使用到搜索功能和文章子菜单时，浏览器的地址栏显示是使用这样的拼接方式：

title = `${to.meta.title}:${to.params[to.meta.params] || ''} - ${title}`

反单引号是使用了模板字符串，中括号是里面是个变量。

否则，使用以下拼接方式：

title = `${to.meta.title} - ${title}`

最后会将title的值赋给document.title。

if (to.path !== from.path) {
      store.dispatch('hzhSetLoading', true);
  }

这个代码如果将要跳转的路由和原来的路由一样，就分发hzhSetLoading这个动作和true值到vuex中的actions中。

router.afterEach((to, from) => {
  // 最多延迟 关闭 loading
  setTimeout(() => {
      store.dispatch('hzhSetLoading', false);
  }, 1500)
})

Vue中的全局导航守卫（beforeEach、afterEach）

这个是全局后置导航钩子函数，里面是一个计时器，计时器计时1500毫秒后，将hzhSetLoading和false动作分发到vuex的actions中。