74- vue3案例 - 05-整体路由设计

一. 整体路由设计

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>