})
const PORT = 3003
app.listen(PORT, function () {
console.log('app is listening port' + PORT)
})
2. 路由配置
在路由配置里面把需要缓存的路由的meta添加keepAlive属性，值为true, 这个想必大家都知道，是缓存路由组件的
在我们项目里面，需要缓存的路由是pageAList，所以这个路由的meta的keepAlive设置成true,其他路由正常写，路由文件src/router/index.js如下：
import Vue from 'vue'
import Router from 'vue-router'
import home from '../pages/home'
import pageAList from '../pages/pageAList'
import pageADetail from '../pages/pageADetail'
import pageB from '../pages/pageB'
import main from '../pages/main'
Vue.use(Router)export default new Router({
routes: [
{
path: '/',
name: 'main',
component: main,
redirect: '/home',
children: [
{
path: 'home',
name: 'home',
component: home
},
{
path: 'pageAList',
name: 'pageAList',
component: pageAList,
meta: {
keepAlive: true
}
},
{
path: 'pageB',
component: pageB
}
] },
{
path: '/pageADetail',
name: 'pageADetail',
component: pageADetail
}
]})
3. vuex配置
vuex的store.js里面存储一个名为excludeComponents的数组,这个数组用来操作需要做缓存的组件
state.js
const state = {
excludeComponents: []}
export default state同时在mutations.js里面加入两个方法， addExcludeComponent是往excludeComponents里面添加元素的，removeExcludeComponent是往excludeComponents数组里面移除元素
注意： 这两个方法的第二个参数是数组或者组件name
mutations.js
const mutations = {
addExcludeComponent (state, excludeComponent) {
let excludeComponents = state.excludeComponents
if (Array.isArray(excludeComponent)) {
state.excludeComponents = [...new Set([...excludeComponents, ...excludeComponent])] } else {
state.excludeComponents = [...new Set([...excludeComponents, excludeComponent])] }
},
// excludeComponent可能是组件name字符串或者数组
removeExcludeComponent (state, excludeComponent) {
let excludeComponents = state.excludeComponents
if (Array.isArray(excludeComponent)) {
for (let i = 0; i < excludeComponent.length; i++) {
let index = excludeComponents.findIndex(v => v === excludeComponent[i])
if (index > -1) {
excludeComponents.splice(index, 1)
}
}
} else {
for (let i = 0, len = excludeComponents.length; i < len; i++) {
if (excludeComponents[i] === excludeComponent) {
