Vue实现左边导航栏，右边显示对应内容

使用嵌套路由实现

这里重点要注意使用 ，路由出口, 路由匹配到的组件将渲染在这里
导航栏代码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"), //组件地址
          },
        ],
      },

效果：