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

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

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

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

App.vue

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

MainView.vue

一个简单的样例如下：

Login.vue

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"}
    },
  ]
})