路由配置
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
redirect: '/blog/welcome'
},
{
path: '*',
name: 'NotFound',
component: NotFound,
meta: { isAuth: false, title: '页面找不到' }
},
{
path: '/blog',
component: BlogFrame,
redirect: '/welcome',
children: [
{
path: 'login',
component: Login,
meta: { isAuth: false, title: '登录博客' }
},
{ path: 'welcome', component: Welcome, meta: { isAuth: false } },
{
path: 'authorupdate',
component: AuthorUpdate,
meta: { isAuth: true }
},
{ path: 'search', component: Search, meta: { isAuth: false } },
{
path: 'detail',
component: ArticleDetail,
meta: { isAuth: false, title: '文章详情' }
},
{
path: 'authorarticle',
component: AuthorArticle,
meta: { isAuth: true, title: '我的文章' }
},
{
path: 'editarticle',
component: EditArticle,
meta: { isAuth: true, title: '博客编辑' }
}
]
},
})
前置路由守卫:用于拦截权限页面
// 路由守卫
router.beforeEach((to, from, next) => {
if (to.meta.isAuth == false) {
next()
} else {
if (window.sessionStorage.getItem('token') === null) {
next('/blog/login')
} else {
next()
}
}
})
后置路由守卫,少了next,负责添加页签title
router.afterEach((to, next) => {
if (to.meta.title) {
document.title = to.meta.title
} else {
document.title = '悦读堂'
}
})
export default router