vue3 element-plus点击导航栏，el-main中的内容根据路由切换

1、路由配置（index.ts）

import { createRouter, createWebHistory ,createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'
import Users from '../views/Users.vue'
import Roles from '../views/Roles.vue'
import Permission from '../views/Permission.vue'
 
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect:'/user',
      children:[
        {
          path: '/user',
          redirect: '/users',
          children: [
            {
              path: '/users',
              name: 'users',
              component: Users,
            }
          ]
        },
        {
          path: '/rights',
          redirect: '/roles',
          children: [
            {
              path: '/roles',
              name: 'roles',
              component: Roles
            },
            {
              path: '/permission',
              name: 'permission',
              component: Permission
            }
          ]
        },
      ]
    },
 
  ]
});
 
 
export default router复制

2、Home.vue

<script setup lang="ts">
import { RouterView, useRoute, useRouter } from 'vue-router';
 
const route = useRoute();
 
 
</script>
 
<template>
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="18" class="flex-start-center">
                    <el-icon :size="30">
                        <Fold />
                    </el-icon>
                    <span>后台管理系统</span>
                </el-col>
                <el-col :span="6" class="flex-end-center">
                    <span class="mr10">用户名</span>
                    <el-button>退出登录</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-active="route.path === '/' ? route.path : route.path.substring(1)" :router="true" class="el-menu-vertical-demo">
                    <el-sub-menu index="user">
                        <template #title>
                            <el-icon><Setting /></el-icon>
                            <span>用户管理</span>
                        </template>
                        <el-menu-item index="users">用户列表</el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="rights">
                        <template #title>
                            <el-icon><Setting /></el-icon>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item index="roles">角色列表</el-menu-item>
                        <el-menu-item index="permission">权限列表</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>
            <el-main>
                <RouterView/>
            </el-main>
        </el-container>
    </el-container>
</template>
<style lang="scss" scoped>
.el-container {
    height: 100%;
    .el-header {
        height: 60px;
        line-height: 60px;
        background: #0ba6fa;
 
        .el-icon {
            cursor: pointer;
        }
    }
 
    .el-container {
        .el-aside {
            height: 100%;
 
            .el-menu {
                height: 100%;
            }
        }
    }
}
</style>复制

3、效果如下图：

4、问题：element-plus中的el-main用router-view跳转的路由不嵌入到el-main中，而是跳转到新页面（路由配置错误）

之前的错误路由index.vue:

import { createRouter, createWebHistory ,createWebHashHistory} from 'vue-router'
import Home from '../views/Home.vue'
import Users from '../views/Users.vue'
import Roles from '../views/Roles.vue'
import Permission from '../views/Permission.vue'
 
const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      redirect:'/user',
    },
    {
      path: '/user',
      redirect: '/users',
      children: [
        {
          path: '/users',
          name: 'users',
          component: Users,
        }
      ]
    },
    {
      path: '/rights',
      redirect: '/roles',
      children: [
        {
          path: '/roles',
          name: 'roles',
          component: Roles
        },
        {
          path: '/permission',
          name: 'permission',
          component: Permission
        }
      ]
    }
 
  ]
});
 
export default router复制