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

Otto_1027

已于 2022-05-03 11:34:01 修改

阅读量1w

点赞数 5

分类专栏： vue 文章标签： vue

于 2022-05-03 11:28:48 首次发布

本文链接：https://blog.csdn.net/ruvikm/article/details/124552560

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了如何在前端应用中使用Vue的嵌套路由配合el-menu实现导航栏，展示了如何配置`<router-view>`和菜单项之间的映射，并通过`redirect`属性优化用户体验。实例代码包括`userInfo.vue`和`notification.vue`组件的展示及其在`index.js`中的配置。

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

使用嵌套路由实现

这里重点要注意使用<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-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"), //组件地址
          },
        ],
      },