vue3-多级路由实现登录页面与业务功能页面分离

vue3所开发的通常是单页面的应用，通常的做法是先创建一个xxx.vue作为主体框架，以一个 admin风格的页面为例，通常包括顶部、左侧边栏、中间核心内容区域等，具体可参考ElementPlus页面的例子（ Container 布局容器 | Element Plus (gitee.io)）。通过点击左侧边栏，在中间区域显示具体某个页面（在vue中其实是组件）的内容。

但是，对于像登录页、404页等页面，如果也以此上述vue文件为框架，则相当于登录页面左侧也同样会显示侧边栏，这不符合要求。

因此，在本项目中，通过使用多级路由的方式，实现登录页面与业务功能页面相互分离。

App.vue

app.vue仅需一个空白的页面即可。

<template>
  <div>
    <RouterView />
  </div>
</template>

MainView.vue

一个简单的样例如下：

<template>
  
  <el-container class="layout-container-demo" >
    <el-aside width="200px" class="aside">
      <el-scrollbar>
        <h2>PROJECT</h2>
        <el-menu :default-openeds="['1']" :router="true">

          <el-menu-item index="/">
            <el-icon><House /></el-icon>
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Monitor /></el-icon>主机管理
            </template>
            <el-menu-item-group>
              <template #title>OpenStack</template>
              <el-menu-item index="/host/openstack/aaa">创建虚机</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group>
              <template #title>Linux</template>
              <el-menu-item index="/host/linux/bbb">系统设置</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header>
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px"
              ><setting
            /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item><el-button link @click="userLogout">LogOut</el-button></el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span> {{ username }} </span>
        </div>
      </el-header>

      <el-main class="middle">
          <RouterView />
      </el-main>
    </el-container>
  </el-container>

</template>

Login.vue

<template>
  <div>
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 500px">
        <div class="clearfix" style="text-align:center">
          <h2>用户登录</h2>
        </div>
        <table style="margin-top:40px;width:100%">
          <tr>
            <td>用户</td>
            <td>
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
                <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter="doLogin"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-button style="width: 50%;margin-left:25%;margin-top:20px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import router from '@/router/index.js'
import store from '@/stores/index.js'

  export default {
    data() {
      return { 
        user: {
          username:'',
          password:''
        }
      }
    },
    methods: {
        doLogin() {
        }
    }
  }
</script>

router/index.js

关键点来了，看代码

import MainView from '../views/MainView.vue'
import LoginView from '../views/Login.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: MainView
    },
    {
      path: '/host',
      name: 'Host',
      component: () => import('../views/MainView.vue'),
      children:[
        {
          path: 'openstack/aaa',
          name: 'aaaaa',
          component: () => import('@/components/OpenstackAaaaaa.vue'),
          meta:{
          }
        },
        {
            path: 'linux/bbb',
            name: 'xxxxxx',
            component: () => import('@/components/LinuxBbbbbb.vue'),
            meta:{
            }
        }
        
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: () => import('@/views/Login.vue'),
      meta:{title:"登录"}
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'NoFound',
        component: () => import('@/views/404.vue'),
        meta:{title:"404"}
    },
  ]
})