vue-router页面重复跳转优化

首先引出问题:有个A页面跳转B页面,B页面跳转C页面,C也可以跳转B页面;用户有可能反复的在B和C页面间跳转,然后通过当前页面的返回按钮返回上一页。如果循环了n次到达C页面,那么要回到A页面就需要按n次返回按钮;

(跳转用的是this.router.push方法;返回用的是this.router.back方法)

//main.js
import router from './router.js'

//把当前导航正要离开的路由名称和判断是否为返回跳转的布尔值,赋值给需要跳转的路由meta对象
router.beforeEach((to, from, next) => {
  to.meta.fromName = from.name || '';
  to.meta.isBack = from.meta && from.meta.isBack;
  next();
})
 //导航组件
//定义跳转和返回两个方法
methods: {
    link(url) {
        if (!url) {
            return;
        }
        // 如果上一个路由和需要跳转的路由为一个路由,并且当前页面不是通过返回跳转的,调用返回跳转
        if (this.$route.meta.fromName == url.name && !this.$route.meta.isBack) {
            this.linkBack();
        } else {
            this.$route.meta.isBack = false;
            this.$router.push(url);
        }
    },
    //返回上级
    linkBack() {
        this.$route.meta.isBack = true;
        this.$router.back();
    }
}
大功告成,最后达到的效果是不论B和C循环多少次跳转,只要点一次返回按钮,就可以从C->B->A
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。