查漏补缺——解释一下这段路由代码啥意思
问题
如题所示
答案
相关源码:
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)
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中。