vue暂存功能_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

{{tag.title}}

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

{

path: '/index',

name: 'index',//需要配置name，

component: resolve => require(['../components/xxx.vue'], resolve),

meta: {

title: 'xxx',

keepAlive: true, //控制页面缓存参数

}

}

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

添加页面缓存