vue 面包屑导航 ，页面缓存功能

1.动态的面包屑导航可以使用store控制数据，先创建一个tagsview.js

 const tagsview = {
   state: {
     visitedviews: [], //存放所有浏览过的且不重复的路由数据
   },
   mutations: { //这
     ADD_VISITED_VIEWS: (state, view) => { //打开新页签--添加路由数据的方法   
       if (state.visitedviews.some(v => v.path == view.path)) return;

       state.visitedviews.push({
         name: view.name,
         path: view.path,
         title: view.meta.title || 'no-title'
       })
     },
     DEL_VISITED_VIEWS: (state, view) => { //关闭页签--删除路由数据的方法
        
       for (let [i, v] of state.visitedviews.entries()) {
         if (v.path == view.path) {
           state.visitedviews.splice(i, 1)
           break
         }
       }
     }
   },
   actions: { //调用这里去触发mutations，如何调用？在组件内使用this.$store.dispatch('action中对应名字', 参数)
     addVisitedViews({
       commit
     }, view) { //通过解构赋值得到commit方法
       commit('ADD_VISITED_VIEWS', view) //去触发ADD_VISITED_VIEWS，并传入参数
     },
     delVisitedViews({
       commit,
       state
     }, view) { //删除数组存放的路由之后，需要再去刷新路由，这是一个异步的过程，需要有回掉函数，所以使用并返回promise对象，也可以让组件在调用的时候接着使用.then的方法
       //commit('DEL_VISITED_VIEWS',view)
       return new Promise((resolve) => { //resolve方法：未来成功后回掉的方法
         commit('DEL_VISITED_VIEWS', view);
         resolve([...state.visitedviews]);
       })
     }

   }
 }

 export default tagsview

2.在store.js文件中引入模块tagsview

import Vue from 'vue'
import Vuex from 'vuex'
import tagsview from './tagsview'

Vue.use(Vuex);
const getters = {
   visitedviews: state => state.tagsview.visitedviews,
};

export default new Vuex.Store({
  modules: {
    tagsview
  },
  getters
  
})

3.创建一个文件TagsView.vue

4.配置路由文件参数router.js

{
        path: '/index',
        name: 'index',//需要配置name，
        component: resolve => require(['../components/xxx.vue'], resolve),
        meta: {
          title: 'xxx', 
          keepAlive: true, //控制页面缓存参数
        }
      }

5.在主页面将TagsView.vue按组件引入，

添加页面缓存