vue侧边栏导航，右侧显示对应内容

最新推荐文章于 2025-05-17 11:14:41 发布

菜鸟小佳

最新推荐文章于 2025-05-17 11:14:41 发布

阅读量8w

点赞数 21

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42429288/article/details/83542029

本文详细介绍了如何在Vue项目中使用vue-router实现导航切换效果，包括下载安装、配置路由、创建组件及在主页中实现导航与路由出口的结合。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最终效果在这里插入图片描述

点击下一个导航，上一个导航自动收回

实现代码
1.下载vue-router

npm install vue-router --save-dev

2.在main.js中引入

import Vue from 'vue'
import Router from 'vue-router' 
Vue.use(Router) // 引入路由

3.在components中新建组件

3.1 agencySearch.vue组件
代码：
<template>
    <div>
        直属下线代理查询
    </div>
</template>
3.2 agencySet.vue组件
代码
<template>
    <div>
        直属下线代理设置
    </div>
</template>
3.3 financialIncome.vue组件
代码
<template>
    <div>
        财务收益数据报表
    </div>
</template>

4.在router下的index.js中引入组件，搭配路由

//4.1引入组件
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home' // 主页
import agencySearch from '@/components/agencySearch' // 直属下线代理查询
import agencySet from '@/components/agencySet' // 直属下线代理设置
Vue.use(Router)
//搭配路由
export default new Router({
  mode: 'history',
  scrollBehavior: () => ({
    y: 0
  }),
  routes: [
    {
      // 主页
      path: '/',
      component: Home,
      name: '代理事物',
      iconCls: 'el-icon-message',
      children: [{
        path: '/agencySearch',
        component: agencySearch,
        name: '直属下线代理查询',
        hidden: true
      },
      {
        path: '/agencySet',
        component: agencySet,
        name: '直属下线代理设置'
      }]
    },
    {
      // 主页
      path: '/',
      component: Home,
      name: '财务报表',
      iconCls: 'el-icon-menu',
      children: [{
        path: '/financialIncome',
        component: financialIncome,
        name: '财务收益数据报表',
        hidden: true
      }]
    }]
})

5.在主页Home组件中搭配导航以及路由出口
在el-menu标签中一定要有 unique-opened 和 router属性，在el-menu-item中index属性值等于在router下index.js中配好的路由名字
这个是从element官网截取的
在这里插入图片描述

<el-row class="tac">
  <el-col :span="24">
    <el-menu
      default-active="1"
      class="el-menu-vertical-demo"
      unique-opened 
      router>
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-message"></i>
          <span>代理事务</span>
        </template>
      <el-menu-item-group>
        <template slot="title"></template>
        <el-menu-item index="/agencySearch">直属下线代理查询</el-menu-item>
        <el-menu-item index="/agencySet">直属下线代理设置</el-menu-item>
      </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>财务报表</span>
        </template>
      <el-menu-item-group>
        <template slot="title"></template>
        <el-menu-item index="/financialIncome">财务收益数据报表</el-menu-item>
      </el-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-col>
</el-row>

路由出口-右侧显示部分

<el-col :span="24" class="content-wrapper">
  <transition name="fade" mode="out-in">
     <router-view></router-view>
   </transition>
 </el-col>

结语：因为是从写好的代码中截取的一部分，可能跑不起来，请见谅，我能理解的原理部分都写在这里啦。

我的项目放在了github上，有兴趣可以看看
代理账号 1，密码 1
后台账号 2，密码 2