vite+vue+ts+element-plus从零开发管理后台框架(05)-菜单和路由

视图

新建src/views/Home.vue，内容如下。

<template>
    首页
</template>

新建src/views/sys/AdmUserPassword.vue，内容如下。

<template>
    密码更新
</template>

新建src/views/sys/AdmUser.vue，内容如下。

<template>
    管理员
</template>

新建src/views/log/AdmUserLogin.vue，内容如下。

<template>
    管理员登录日志
</template>

路由配置

编辑src/router/index.ts，修改Main路由如下。

    {
        path: '/',
        name: 'Main',
        component: () => import('@/views/Main.vue'),

        redirect: '/Home',

        children: [
            {
                path: '/Home',
                name: 'Home',
                component: () => import('@/views/Home.vue'),
            },

            {
                path: '/sys/AdmUserPassword',
                name: 'AdmUserPassword',
                component: () => import('@/views/sys/AdmUserPassword.vue'),
            },
            {
                path: '/sys/AdmUser',
                name: 'AdmUser',
                component: () => import('@/views/sys/AdmUser.vue'),
            },

            {
                path: '/log/AdmUserLogin',
                name: 'AdmUserLogin',
                component: () => import('@/views/log/AdmUserLogin.vue'),
            },
        ],
    },

主页修改

编辑src/views/Main.vue，template和script内容如下。

<template>
    <el-container>
        <el-header>Header</el-header>

        <el-container>
            <el-aside>
                <el-menu router
                    :default-active="route.path">
                    <el-menu-item index="/Home">首页</el-menu-item>

                    <el-sub-menu index="sys">
                        <template #title>
                            <span>系统</span>
                        </template>
                        <el-menu-item index="/sys/AdmUserPassword">密码更新</el-menu-item>
                        <el-menu-item index="/sys/AdmUser">管理员</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="log">
                        <template #title>
                            <span>日志</span>
                        </template>
                        <el-menu-item index="/log/AdmUserLogin">管理员登录</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <el-main><router-view /></el-main>
        </el-container>
    </el-container>
</template>


<script setup lang="ts">
import { useRoute } from 'vue-router'


const route = useRoute()
</script>

浏览器访问 localhost:5173/#/ ，发现菜单正确渲染出来并且点击菜单子路由跳转后el-main渲染也没问题。

正常样式

编辑src/views/Main.vue，style修改如下。

<style scoped>
.el-header {
    border-bottom: 1px solid var(--el-border-color);
}
</style>

本作品采用《CC 协议》，转载必须注明作者和本文链接