一. 整体路由设计
1. views新建文件夹
login, layout, article, user
2. 新增路由组件
src\views\article\AtricleChannel.vue
src\views\article\AtricleManage.vue
src\views\layout\LayoutContainer.vue
src\views\login\LoginPage.vue
src\views\user\UserAvatar.vue
src\views\user\UserPassword.vue
src\views\user\UserProfile.vue
3. 配置路由规则
src\router\index.js
import { createRouter, createWebHistory } from 'vue-router'
// createRouter 创建路由实例
// 1. history模式: createWebHistory 地址栏不带 #
// 2. hash模式: createWebHashHistory 地址栏带 #
// import.meta.env.BASE_URL: 路由前缀
// vite中的环境变量 import.meta.env.BASE_URL 就是 vite.config.js中的 base 配置项
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
// 异步加载
{ path: '/login', component: () => import('@/views/login/LoginPage.vue') }, // 登录页
{
path: '/',
component: () => import('@/views/layout/LayoutContainer.vue'),
redirect: '/article/manage',
children: [
{
path: '/article/manage',
component: () => import('@/views/article/AtricleManage.vue')
},
{
path: '/article/channel',
component: () => import('@/views/article/AtricleChannel.vue')
},
{
path: '/user/profile',
component: () => import('@/views/user/UserProfile.vue')
},
{
path: '/user/avatar',
component: () => import('@/views/user/UserAvatar.vue')
},
{
path: '/user/password',
component: () => import('@/views/user/UserPassword.vue')
}
]
}
]
})
export default router
4. App.vue预留路由出口
<template>
<div>
<!--路由出口-->
<router-view></router-view>
</div>
</template>