total: 0,
allList: [],
list: [] }
},
methods: {
getVideoList () {
let params = {currentPage: this.currentPage, pageSize: this.pageSize}
getVideoList(params).then(r => {
if (r.code === 0) {
this.list = r.data.list
this.total = r.data.total
}
})
},
goIntoVideo (item) {
this.$router.push({name: 'pageADetail', query: {id: item.id}})
},
handleCurrentPage (val) {
this.currentPage = val
this.getVideoList()
}
},
beforeRouteEnter (to, from, next) {
next(vm => {
vm.$store.commit('removeExcludeComponent', 'pageAList')
next()
})
},
beforeRouteLeave (to, from, next) {
let reg = /pageADetail/
if (reg.test(to.name)) {
this.$store.commit('removeExcludeComponent', 'pageAList')
} else {
this.$store.commit('addExcludeComponent', 'pageAList')
}
next()
},
activated () {
this.getVideoList()
},
mounted () {
this.getVideoList()
}
}
beforeRouteEnter,进入这个组件pageAList之前，在excludeComponents移除当前组件，也就是缓存当前组件，所以任何路由跳转到这个组件，这个组件其实都是被缓存的，都会触发activated钩子
beforeRouteLeave： 离开当前页面，如果跳转到pageADetail,那么就需要在excludeComponents移除当前组件pageAList，也就是缓存当前组件，如果是跳转到其他页面，就需要把pageAList添加进去excludeComponents，也就是不缓存当前组件
获取数据的方法getVideoList在mounted或者created钩子里面调取，如果二级路由更改数据，一级路由需要更新，那么就需要在activated钩子里再获取一次数据，我们这个详情可以收藏，改变列表的状态，所以这两个钩子都使用了
6. 二级组件
对于需要缓存的一级路由的二级路由组件pageADetail，添加beforeRouteLeave路由生命周期钩子
在这个beforeRouteLeave钩子里面，需要先清除一级组件的缓存状态，如果跳转路由匹配到一级组件，再缓存一级组件
beforeRouteLeave (to, from, next) {
let componentName = ''
// 离开详情页时,将pageAList添加到exludeComponents里，也就是将需要缓存的页面pageAList置为不缓存状态
let list = ['pageAList'] this.$store.commit('addExcludeComponent', list)
// 缓存组件路由名称到组件name的映射
let map = new Map([['pageAList', 'pageAList']])
componentName = map.get(to.name) || ''
// 如果离开的时候跳转的路由是pageAList，将pageAList从exludeComponents里面移除，也就是要缓存pageAList
this.$store.commit('removeExcludeComponent', componentName)
next()
}7.实现方法总结
进入了pageAList，就在beforeRouteEnter里缓存了它，离开当前组件的时候有两种情况：
