MyfronyProject/src/router/Router.js

import { createWebHistory, createRouter } from 'vue-router'
// 导入视图组件
import ArticleList from '../views/aericlelist.vue'
import HomePage from '../views/home.vue'
import NonsensePage from '../views/nonsense.vue'
import MessageBoardPage from '../views/messageboard.vue'
import AboutMePage from '../views/aboutme.vue'
import ArticleContentPage from '../views/articlecontents.vue'
import LoginPage from '../views/login.vue'
import ArticleSavePage from '../views/articlesave.vue'

/**
 * 路由配置数组
 * 定义了应用的所有路由路径和对应的组件
 */
const routes = [
  {
    path: '/',
    redirect: '/home' // 默认跳转到首页，显示所有文章
  },
  {
    path: '/home',
    name: 'home',
    component: HomePage,
    meta: { title: '首页' },
    children: [
      {
        path: 'aericletype',
        name: 'homeByType'
      },
      {
        path: 'aericletitle',
        name: 'homeByTitle'
      }
    ]
  },
  {
    path: '/article-list',
    name: 'articleList',
    component: ArticleList,
    meta: {
      title: '文章目录'
    }
  },
  {
    path: '/nonsense',
    name: 'nonsense',
    component: NonsensePage,
    meta: {
      title: '随笔'
    }
  },
  {
    path: '/message',
    name: 'messageBoard',
    component: MessageBoardPage,
    meta: {
      title: '留言板'
    }
  },
  {
    path: '/about',
    name: 'aboutMe',
    component: AboutMePage,
    meta: {
      title: '关于我'
    }
  },
  {
    path: '/article',
    name: 'articleContent',
    component: ArticleContentPage,
    meta: {
      title: '文章详情'
    }
  },
  {
    path: '/login',
    name: 'login',
    component: LoginPage,
    meta: {
      title: '登录'
    }
  },
  {
    path: '/articlesave',
    name: 'articlesave',
    component: ArticleSavePage,
    meta: {
      title: '保存文章'
    }
  }
]

/**
 * 创建路由实例
 */
const router = createRouter({
  history: createWebHistory(),
  routes,
  scrollBehavior() {
    // 路由切换时滚动到页面顶部
    return { top: 0 }
  }
})

/**
 * 全局路由守卫 - 处理页面标题
 */
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title + ' - 个人博客'
  } else {
    document.title = '个人博客'
  }
  next()
})

export default router;