Vue+Element-ui 导航栏和面包屑联动

第一步：创建vuex实例

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        currentPathName: ''
    },
    mutations: {
        setPath (state) {
            state.currentPathName = localStorage.getItem("currentPathName")
        }
    }
})

export default store

第二步：创建路由实例

import Vue from 'vue'
import VueRouter from 'vue-router'
import store from '@/store'

Vue.use(VueRouter)

const routes = [
  {
    path:'/',
    component: () => import('../views/Manage.vue'),
    redirect: '/home',
    children:[
      {path: 'home', name: '首页', component: () => import('../views/Home.vue')},
      {path: 'user', name: '用户管理', component: () => import('../views/User.vue')},
    ]
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

router.beforeEach((to,from,next) => {
  localStorage.setItem("currentPathName", to.name)  //存储当前的路由名称,为了在Header组件中使用
  store.commit('setPath') // 触发store的数据更新
  next() // 放行
})

export default router

第三步：全局引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import request from './utils/request';


Vue.config.productionTip = false
Vue.use(ElementUI, {size:'small'})

Vue.prototype.request = request

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

第四步：使用

<!-- 面包屑 -->
<el-breadcrumb separator="/" style="display:inline-block; margin-left: 10px">
   <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
   <el-breadcrumb-item>{{currentPathName}}</el-breadcrumb-item>
</el-breadcrumb>

computed: {
   currentPathName () {
       return this.$store.state.currentPathName
   }
},

注意：vue2 --> vuex3; vue3 --> vuex4

版本不对呀会出现如下问题

 

 学习时参考：程序员青戈的小白做毕设