vue router 路由跳转当前页面
步骤描述:在开发过程中,用到列表页与详情页,详情页面中有推荐新闻,点击跳转到仍然是详情页面;
在连续点击详情页推荐新闻后,碰到这样一个矛盾问题:
1、如果返回上一页面时不想刷新,保留之前的滚动位置,但是触发不了路由动画
<transition :name='transitionName'>
<router-view v-if='isRouterAlive' />
</transition>
2、如果触发路由动画,页面就会刷新,保存不了之前的效果,而且重新走生命周期函数,浪费带宽访问接口
路由监听代码如下:
methods: {
reload() {
//重新加载路由
this.isRouterAlive = false;
this.$nextTick(function() {
this.isRouterAlive = true;
})
}
},
watch: {
//使用watch 监听$router的变化
$route(to, from) {
var arr = this.store.get('routerTimes') || [];
if(to.query.time > from.query.time || !from.query.time) {
this.log.u('新打开页面')
arr.push(to.query.time);
this.transitionName = 'slide-left';
window.scrollTo(0, 0);
document.documentElement.scrollTop = document.body.scrollTop = 0;
this.reload();
} else {
// this.reload();
this.log.u('返回上一层页面')
arr.splice(arr.indexOf(from.query.time), 1);
this.transitionName = 'slide-right';
}
this.store.set('routerTimes', arr);
}
}
推荐新闻跳转
goRcomm(e) {
var id = e.currentTarget.id;
this.$router.push({
name: 'videoDetails',
query: {
id: id,
time:new Date().getTime()
}
});
}
返回上一页面跳转
methods: {
backPrev() {
this.$router.go(-1);
}
},