Browse Source

feat(router): add route-level meta and afterEach hook

main
Mohan 1 month ago
parent
commit
e7c86ae0ac
  1. 43
      src/router/index.ts

43
src/router/index.ts

@ -1,5 +1,6 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import { useAuthStore } from '@/stores/auth' import { useAuthStore } from '@/stores/auth'
import { setPageMeta } from '@/utils/seo'
const router = createRouter({ const router = createRouter({
history: createWebHistory(), history: createWebHistory(),
@ -7,7 +8,8 @@ const router = createRouter({
{ {
path: '/', path: '/',
name: 'Home', name: 'Home',
component: () => import('@/views/HomeView.vue')
component: () => import('@/views/HomeView.vue'),
meta: { title: '首页', description: 'Mach-CMS 技术博客与笔记' }
}, },
{ {
path: '/post/:slug', path: '/post/:slug',
@ -17,24 +19,25 @@ const router = createRouter({
{ {
path: '/search', path: '/search',
name: 'Search', name: 'Search',
component: () => import('@/views/SearchView.vue')
component: () => import('@/views/SearchView.vue'),
meta: { title: '搜索' }
}, },
{ {
path: '/login', path: '/login',
name: 'Login', name: 'Login',
component: () => import('@/views/LoginView.vue'), component: () => import('@/views/LoginView.vue'),
meta: { guestOnly: true }
meta: { guestOnly: true, title: '登录' }
}, },
{ {
path: '/register', path: '/register',
name: 'Register', name: 'Register',
component: () => import('@/views/RegisterView.vue'), component: () => import('@/views/RegisterView.vue'),
meta: { guestOnly: true }
meta: { guestOnly: true, title: '注册' }
}, },
{ {
path: '/admin', path: '/admin',
component: () => import('@/views/admin/AdminLayout.vue'), component: () => import('@/views/admin/AdminLayout.vue'),
meta: { requiresAuth: true },
meta: { requiresAuth: true, title: '管理后台' },
children: [ children: [
{ {
path: '', path: '',
@ -43,36 +46,46 @@ const router = createRouter({
{ {
path: 'articles', path: 'articles',
name: 'AdminArticleList', name: 'AdminArticleList',
component: () => import('@/views/admin/ArticleListView.vue')
component: () => import('@/views/admin/ArticleListView.vue'),
meta: { title: '文章管理' }
}, },
{ {
path: 'articles/new', path: 'articles/new',
name: 'AdminArticleCreate', name: 'AdminArticleCreate',
component: () => import('@/views/admin/ArticleEditorView.vue')
component: () => import('@/views/admin/ArticleEditorView.vue'),
meta: { title: '新建文章' }
}, },
{ {
path: 'articles/edit/:id', path: 'articles/edit/:id',
name: 'AdminArticleEdit', name: 'AdminArticleEdit',
component: () => import('@/views/admin/ArticleEditorView.vue')
component: () => import('@/views/admin/ArticleEditorView.vue'),
meta: { title: '编辑文章' }
}, },
{ {
path: 'tags', path: 'tags',
name: 'AdminTagList', name: 'AdminTagList',
component: () => import('@/views/admin/TagListView.vue')
component: () => import('@/views/admin/TagListView.vue'),
meta: { title: '标签管理' }
}, },
{ {
path: 'users', path: 'users',
name: 'AdminUserList', name: 'AdminUserList',
component: () => import('@/views/admin/UserListView.vue'), component: () => import('@/views/admin/UserListView.vue'),
meta: { requiresAdmin: true }
meta: { requiresAdmin: true, title: '用户管理' }
}, },
{ {
path: 'comments', path: 'comments',
name: 'AdminCommentReview', name: 'AdminCommentReview',
component: () => import('@/views/admin/CommentReviewView.vue'), component: () => import('@/views/admin/CommentReviewView.vue'),
meta: { requiresAdmin: true }
meta: { requiresAdmin: true, title: '评论审核' }
} }
] ]
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('@/views/NotFoundView.vue'),
meta: { title: '页面不存在' }
} }
] ]
}) })
@ -91,4 +104,12 @@ router.beforeEach((to, _from, next) => {
} }
}) })
// 全局后置钩子设置 meta
router.afterEach((to) => {
const meta = to.meta as { title?: string; description?: string }
if (meta.title) {
setPageMeta({ title: meta.title, description: meta.description })
}
})
export default router export default router
Loading…
Cancel
Save