//router.js
const routes = [
// 列表页
{ path: '/list', name: 'list', component: resolve=> require(['@/views/details'],resolve), meta: { title:'列表',keepAlive:true //需要缓存 }}
// 详情页
{ path: '/details', name: 'details', component: resolve=> require(['@/views/details'],resolve), meta: { title:'详情',keepAlive:false //无需缓存 }}
]
export default new Router({
mode:'history',
routes,
//scrollBehavior滚动(恢复现场) 仅在支持 history.pushState 的浏览器中可用。
scrollBehavior (to, from, savedPosition) {
if(savedPosition) {
/*return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(savedPosition)
}, 500)
})*/
return savedPosition
} else {
return {
x: 0,
y: 0
}
}
}
})
// App.vue
// keep-alive 缓存页面不刷新
<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive" />
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" />
</div>
</template>
关于scrollBehavior描述:
https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html