使用嵌套路由实现
这里重点要注意使用<router-view></router-view>，路由出口, 路由匹配到的组件将渲染在这里
导航栏代码userInfo.vue：
<template><el-row type="flex" justify="center" :gutter="8"><el-col v-if="user" :span="20"><el-col :span="4"><el-menudefault-active="account"class="el-menu-vertical-demo"@select="handleSelectMenu"><el-menu-item index="account"><i class="el-icon-s-data"></i><span slot="title">基本信息</span></el-menu-item><el-menu-item index="notification"><i class="el-icon-monitor"></i><span slot="title">通知</span></el-menu-item></el-menu></el-col><el-col :span="20"><router-view></router-view></el-col></el-col><el-col v-else class="text-center"><el-alerttitle="用户无权限"type="warning"centershow-icon:closable="false"></el-alert></el-col></el-row></template><script>export default {name: "Settings",computed: {user() {return this.$store.getters.name;},},data() {return {};},methods: {handleSelectMenu(item) {let _ts = this;_ts.$router.push({path: `/userinfo/${item}`,});},},};</script><style scoped></style>
组件notification.vue
<template><div>通知</div></template><script>export default {data() {return {};},methods: {},components: {},};</script><style scoped></style>
在index.js中配置对应组件的路径，把组件的路径一定要配置到菜单路径的children属性下。这里重点要强调一下配置redirect属性，如不加则进入/userinfo页面需要点击菜单上的内容才可以在后边渲染内容
{path: "/userinfo",redirect:"/userinfo/account",//默认选择第一个component: () => import("@/views/user/userInfo"), //组件地址children: [{path: "/userinfo/account",name:"account",component: () => import("@/views/user/settings/account"), //组件地址},{path: "/userinfo/notification",name:"notification",component: () => import("@/views/user/settings/notification"), //组件地址},],},
效果：
