本篇文章分享一篇关于 vue制作可路由切换组件、可刷新根据路由定位导航（自动展开）、可根据路由高亮对应导航选项

一、实现的功能如下：

1、可折叠导航面板

2、点击导航路由不同组件

            

3、在当前页f5刷新，或者在url输入对应的路由地址，会根据路由打开左侧导航对应的位置并且展开、高亮

 

二、代码详情

1、main.js

import Vue from 'vue'
import App from './App'
import router from './router'
//引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'


// 注册elementUi组件
Vue.use(ElementUI)
Vue.config.productionTip = false

/* eslint-disable no-new */
let gvm = new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

2、navSlideBar.vue

<template>
    <div class="navslidebar">
        <div class="navHeaderbar"></div>
        <el-menu :default-active="$route.path" router class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" background-color="#2aaae4" :unique-opened="uniqueOpened" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item class="oneLi" v-for="(item, i) in navList" :key="i" :index="item.name" @click="haha">
                <i style="font-size:14px; color:#fff" class="el-icon-document"></i>
                <span slot="title">{{$t(item.navItem)}}</span>
            </el-menu-item>
            <el-submenu v-for="(item,index) in subNavList" :key="index+1" :index="item.name">
                <template slot="title">
                    <i style="font-size:14px; color:#fff" class="el-icon-document"></i>
                    <span @click="haha">{{$t(item.navItem)}}</span>
                </template>
                <el-menu-item class="SubLi" v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.name">
                    <p><span></span><span></span></p>
                    {{$t(subItem.navItem)}}
                </el-menu-item>
            </el-submenu>
            <el-menu-item class="oneLi" key="-1" index="/download">
                <i style="font-size:14px; color:#fff" class="el-icon-document"></i>
                <span slot="title">{{$t("slideBar.download")}}</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

template 

<script>
    export default {
        name: "NavSlidebar",
        data() {
            return {
                uniqueOpened: true, //只打开一个二级导航
                navList: [{
                    name: "/overall",
                    navItem: "slideBar.overall"
                }],
                subNavList: [{
                        name: "/servicevolume",
                        navItem: "slideBar.servicevolume",
                        children: [{
                                name: "/visitvolume",
                                navItem: "slideBar.visitvolume"
                            },
                            {
                                name: "/users",
                                navItem: "slideBar.users"
                            },
                            // {
                            //   name: "/multimediausage",
                            //   navItem: "slideBar.multimediausage"
                            // }
                        ]
                    },
                    {
                        name: "/servicefficiency",
                        navItem: "slideBar.servicefficiency",
                        children: [{
                                name: "/solvedstatus",
                                navItem: "slideBar.solvedstatus"
                            },
                            {
                                name: "/transferredrate",
                                navItem: "slideBar.transferredrate"
                            },
                            // {
                            //   name: "/cast",
                            //   navItem: "slideBar.cast"
                            // }
                        ]
                    },
                    {
                        name: "/kgperformance",
                        navItem: "slideBar.kgperformance",
                        children: [{
                                name: "/question",
                                navItem: "slideBar.question"
                            },
                            // {
                            //   name: "/outofscopeanalysis",
                            //   navItem: "slideBar.outofscopeanalysis"
                            // }
                        ]
                    },
                    {
                        name: "/sessionflow",
                        navItem: "slideBar.sessionflow",
                        children: [{
                                name: "/handingtime",
                                navItem: "slideBar.handingtime"
                            },
                            {
                                name: "/handingturns",
                                navItem: "slideBar.handingturns"
                            },
                            {
                                name: "/leavingstatus",
                                navItem: "slideBar.leavingstatus"
                            },
                            {
                                name: "/customerjourney",
                                navItem: "slideBar.customerjourney"
                            }
                        ]
                    }
                ]
            };
        },
        methods: {
            haha() {},
            handleOpen(key, keyPath) {
                //console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                //console.log(key, keyPath);
            }
        },
        computed: {}
    };
</script>

script 

<style>
    div.navHeaderbar {
        height: 48px;
        /* background: url("~@/assets/navHead.jpg") center no-repeat; */
        background: url("./../../../../static/image/navHead.jpg") center no-repeat;
        background-size: auto 48px;
    }
    
    .el-menu {
        border-right: none !important;
    }
    /* 一级导航划入颜色 */
    
    .oneLi:focus,
    .oneLi:hover {
        background-color: #2bace580 !important;
    }
    
    .el-submenu__title:hover {
        background-color: #2bace580 !important;
    }
    
    .SubLi {
        position: relative;
        background-color: #239ACA !important;
        font-size: 13px;
    }
    
    .el-menu-item,
    .el-submenu__title {
        height: 40px !important;
        line-height: 40px !important;
        /* padding-left: 15px !important; */
    }
    
    .el-submenu .el-menu-item {
        height: 40px !important;
        line-height: 40px !important;
    }
    
    .el-submenu__title i {
        color: #fff !important;
        font-size: 14px;
    }
    
    .SubLi>p {
        width: 15px;
        height: 40px;
        position: absolute;
        left: 20px;
        top: 0;
    }
    
    .SubLi>p>span {
        display: block;
        width: 15px;
        height: 50%;
        opacity: .2;
        border-left: 1px solid #fff;
    }
    
    .SubLi>p>span:first-child {
        border-bottom: 1px solid #fff;
    }
    
    .SubLi:hover {
        background-color: rgba(8, 15, 39, 0.3) !important
    }
</style>

style

3、router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import index from '@/views/layout/index'

//一级路由组件引入
import Overall from '@/views/Overall/Overall'

//ServiceVolume
import VisitVolume from '@/views/ServiceVolume/VisitVolume'
import Users from '@/views/ServiceVolume/Users'
import MultimediaUsage from '@/views/ServiceVolume/MultimediaUsage'

//ServicEfficiency
import CASTs from '@/views/ServicEfficiency/CAST'
import SolvedStatus from '@/views/ServicEfficiency/SolvedStatus'
import TransferredRate from '@/views/ServicEfficiency/TransferredRate'

//KgPerformance
import Question from '@/views/KgPerformance/Question'

//SessionFlow
import CustomerJourney from '@/views/SessionFlow/CustomerJourney'
import HandingTime from '@/views/SessionFlow/HandingTime'
import HandingTurns from '@/views/SessionFlow/HandingTurns'
import LeavingStatus from '@/views/SessionFlow/LeavingStatus'

//DownLoad
import DownLoad from '@/views/DownLoad/DownLoad'
Vue.use(Router)

export default new Router({
    // mode: 'history',
    routes: [
        { path: '*', redirect: '/overall' },
        { path: '/index', name: 'index', component: Overall },
        { path: '/overall', name: 'overall', component: Overall },
        
        { path: '/visitvolume', name: 'visitvolume', component: VisitVolume },
        { path: '/users', name: 'users', component: Users },
        { path: '/multimediausage', name: 'multimediausage', component: MultimediaUsage },
        { path: '/cast', name: 'cast', component: CASTs },
        { path: '/solvedstatus', name: 'solvedstatus', component: SolvedStatus },
        { path: '/transferredrate', name: 'transferredrate', component: TransferredRate },
        { path: '/question', name: 'question', component: Question },
        { path: '/handingtime', name: 'handingtime', component: HandingTime },
        { path: '/handingturns', name: 'handingturns', component: HandingTurns },
        { path: '/leavingstatus', name: 'leavingstatus', component: LeavingStatus },
        { path: '/customerjourney', name: 'customerjourney', component: CustomerJourney },
        { path: '/download', name: 'download', component: DownLoad },
    ]
})

router/index.js

 

版权声明：本文为wangweizhang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/wangweizhang/p/10240759.html