vue跳转，前进后退，点击浏览器的返回按钮，地址栏路由变了但是页面没跳转

H_ZMY

已于 2023-10-19 09:30:04 修改

阅读量4.5k

点赞数 8

分类专栏： WEB前端开发BUG 文章标签： vue.js 前端 javascript web

于 2023-09-04 13:42:43 首次发布

本文链接：https://blog.csdn.net/H_ZMY/article/details/132663894

版权

WEB前端开发BUG 专栏收录该内容

6 篇文章

订阅专栏

Vue项目使用
this.$router.push({
path: ‘/home’
});进行跳转
从页面A—>B,B—>C,C—>B(OK),B—>A(失败)已解决

一、跳转设置：

1、在APP.vue中：页面切换的位置，对不同的页面进行不同的渲染。
不需要让页面重新加载时用keep-alive来对页面进行缓存，防止重复渲染DOM
不使用keep-alive:
beforeRouteEnter > beforeCreate > created> mounted > activated > … … > beforeRouteLeave > deactivated
使用keep-alive:
beforeRouteEnter >activated > … … > beforeRouteLeave > deactivated

<template>
  <div id="app">
    <keep-alive><router-view v-if="$route.meta.keepAlive"/></keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </div>
</template>

2、在路由中设置keepAlive属性判断是否需要缓存,在需要缓存的路由中加入keepAlive:true.
router.js

const routes = [
  {
    path: "/home",
    name: "Home",
    component: () => import("@/views/Home"),
    meta: {
      keepAlive: true,
    }
    },
    {
    path: "/menufour",
    name: "menuFour",
    component: () => import("@/views/Home/menuFour"),
    meta: {
      keepAlive: true,
    }
  },
  {
    path: "/iframe",
    name: "Iframe",
    component: () => import("@/views/Home/iframe"),
  }]
  const router = new VueRouter({
  routes
});
router.beforeEach((to, from, next) => {
  next();
  });
  export default router;

3、在Home/index.vue页面中加入跳转。

 this.$router.push({
            path: "/menufour",
          });
 this.$router.push({
                path: "/iframe",
          });

二、解决办法

1、排查错误原因
在router.js中beforeEach打印from 和 to,发现路由正常跳转，没有问题，且没忽略next()。
2、考虑A页面是否有报错导致返回时加载不出来，意外发现在从A—>B页面时设置的一些条件状态满足从A—>B的，也就导致在从B—>A时，发生了B—>A—>B,不知道为什么B—>A—>B只打印了B—>A的路由，当把A页面中的状态调整之后，B—>A就能正常返回了。