这里重点要注意使用
,路由出口, 路由匹配到的组件将渲染在这里
导航栏代码userInfo.vue
:
<template>
<el-row type="flex" justify="center" :gutter="8">
<el-col v-if="user" :span="20">
<el-col :span="4">
<el-menu
default-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-alert
title="用户无权限"
type="warning"
center
show-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"), //组件地址
},
],
},