elementui plus 配合 vue-router 实现组件动态加载

最新推荐文章于 2024-07-18 23:16:32 发布

xiaoxiaosu15

最新推荐文章于 2024-07-18 23:16:32 发布

阅读量395

点赞数

文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/xiaoxiaosu15/article/details/130387209

版权

这是一个使用Vue.js构建的用户设置界面示例，包含一个侧边菜单（el-menu），菜单项通过index与路由匹配。当点击菜单项时，<router-view>标签会根据路由配置加载相应的组件，如个人信息、我的租户和账号安全等。

摘要由CSDN通过智能技术生成

直接上代码

usersetting.vue

<template>
    <div class="usersetting">
        <div class="title">
            用户设置
        </div>
        <div class="main">
            <div class="menu">
                // 可以通过el-menu-item 的 index 实现路由匹配
                <el-menu default-active="/system/usersetting/personalInformation" class="el-menu-vertical-demo" router>
                    <el-menu-item index="/system/usersetting/personalInformation" >
                        <template #title>
                            <el-icon><user /></el-icon>
                            <span>个人信息</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="/system/usersetting/myRelTenantIds">
                        <template #title>
                            <el-icon><user /></el-icon>
                            <span>我的租户</span>
                        </template>
                    </el-menu-item>
                    <el-menu-item index="/system/usersetting/accountSafety">
                        <template #title>
                            <el-icon><Lock /></el-icon>
                            <span>账号安全</span>
                        </template>
                    </el-menu-item>
                </el-menu>
            </div>
            <div class="conten">
                <router-view></router-view> // 这个标签会自动在当前页面的路由下寻找 children，所以要在路由配置文件中配置好相应组件的路由
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: 'usersetting'
}
</script>

/router/index.js

import { createRouter } from "vue-router";
const routes = [
    {
				path: '/system/usersetting',
				title: '系统账户设置',
				name: 'usersetting',
				component: () => import('@/views/system/usersetting.vue'),
				children: [
					{
						path: '/system/usersetting/personalInformation',
						title: '个人信息',
						name: 'personalInformation',
						component: () => import('@/views/system/components/personalInfomation.vue')
					},
					{
						path: '/system/usersetting/myRelTenantIds',
						title: '个人信息',
						name: 'myRelTenantIds',
						component: () => import('@/views/system/components/myRelTenantIds.vue')
					},
					{
						path: '/system/usersetting/accountSafety',
						title: '账号安全',
						name: 'accountSafety',
						component: () => import('@/views/system/components/accountSafety.vue')
					},
				]
			}
]

// 导出路由
const router = createRouter({
	routes
});


export default router