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

视图

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

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

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

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

路由配置

编辑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内容如下。

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

正常样式

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