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);
            }
        },
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!