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

<template id="">
  <div class="tags-view-container"  v-show='visitedViews.length>0'>
    <div class="tags-view-wrap">
      <router-link v-for="tag in Array.from(visitedViews)" :to="tag.path" :key="tag.path" class="tags-view-item"
        :class="isActive(tag)?'active':''">
        {{tag.title}}
        <span class="el-icon-circle-close-outline" @click.prevent.stop="delSelectTag(tag)"></span>
      </router-link>
    </div>
  </div>
</template>
<script>
  export default {
    computed: {
      visitedViews() {
        //store中取值
        return this.$store.state.tagsview.visitedviews;
      }
    },
    methods: {
      isActive(route) {
        return route.path == this.$route.path;
      },
      addViewTags() {
        //路由改变时执行的方法
        console.log(this.$route);
        if (this.$route.name) {
          const route = this.$route;
          this.$store.dispatch("addVisitedViews", route);
        }
      },
      delSelectTag(route) {
        //先提交删除数据的方法,数组删除出掉数据后，如果关闭的是当前打开的路由需要将路由改为数组最后一次push进去的路由
        this.$store.dispatch("delVisitedViews", route).then(views => {
          if (this.isActive(route)) {
            //只有在关闭当前打开的标签页才会有影响
            let lastView = views.slice(-1)[0]; //选取路由数组中的最后一位
            if (lastView) {
              this.$router.push(lastView);
            } else {
              this.$router.push("/");
            }
          }
        });
      }
    },
    watch: {
      $route() {
        this.addViewTags();
      }
    }
  };

</script>


<style scoped>
  .tags-view-wrap {
    background: #efeef0;
    position: absolute;
    top: 10px;
    left: 20px;
    width: 100%;
    height: 30px;
    overflow: hidden;
  }

  .tags-view-wrap .tags-view-item {
    height: 30px;
    line-height: 30px;
    display: inline-block;
    color: #fff;
    background-color: #409EFF;
    padding: 0 3px;
    border-radius: 5px;
    margin: 0 3px;
  }

  .tags-view-wrap .tags-view-item:hover {
    color: rgb(221, 247, 5);
  }

  .tags-view-wrap .active {
    color: rgb(221, 247, 5);
  }

</style>

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

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

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

<template>
  <div class="content-box">
    <el-container class="box">      
      <div class="content">        
        <el-main class="main">
          <tags></tags>
         
          <keep-alive>
            <router-view v-if="$route.meta.keepAlive">
              <!-- 这里是会被缓存的视图组件 -->
            </router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive">
            <!-- 这里是不被缓存的视图组件-->
          </router-view>
          
        </el-main>
      </div>
    </el-container>
  </div>
</template>
<script>
   
  import tags from '../components/xx/TagsView.vue';
  
  export default {
    components: {
     
      tags,
    },
    data() {
      return {

      }
    },
    methods: {

    },
    computed: {
       
    }
  }

</script>
 

添加页面缓存

          <keep-alive>
            <router-view v-if="$route.meta.keepAlive">
              <!-- 这里是会被缓存的视图组件 -->
            </router-view>
          </keep-alive>
          <router-view v-if="!$route.meta.keepAlive">
            <!-- 这里是不被缓存的视图组件-->
          </router-view>