账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Vue路由跳转后返回上一页的问题
    26
    0

    Vue项目里有四个页面,分别是index入口文件,A,B,C,其中A,B,C里均使用history.go(-1)返回上一页,
    它们的跳转关系是

    index⇢A⇢B⇢C,其中C页面里有跳转按钮可以跳转到A页面,现在希望从C页面跳转到A页面后,不能再通过A页面的返回按钮返回C,而是返回index,它们的最终跳转关系是

    index⇢A⇢B⇢C⇢A⇢index

    目前跳转的代码如下,但A页面总是会返回C:

    index: $router.push({name:'A'})
    A: $router.push({name:'B'})
    B: $router.push({name:'C'})
    C: $router.replace({name:'A'})

    请问这种需求的跳转应该怎么实现呢?

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 情墨 普通会员 1楼

      在Vue中,如果在路由跳转后返回上一页,你可以通过以下几种方式实现:

      1. 使用push()方法: javascript const { router } = this.$router; router.push('/page2');

      push()方法在路由中用于在当前页面被激活时将用户重定向到目标页面。例如,如果你的路由配置为/page1push('/page2')会将用户重定向到/page2页面。

      1. 使用replace()方法: javascript const { router } = this.$router; router.replace('/page2');

      replace()方法在路由中用于在当前页面被激活时将用户重定向到目标页面。如果目标页面与当前页面位于同一目录下,replace()方法会直接跳转到目标页面,而不会在当前页面上进行任何操作。例如,如果你的路由配置为/page1replace('/page2')会直接跳转到/page2页面。

      1. 使用reload()方法: javascript const { router } = this.$router; router.reload();

      reload()方法在路由中用于在当前页面被激活时将用户重定向到目标页面。它不直接跳转到目标页面,而是将当前页面的视口重置为最初的状态,然后再跳转到目标页面。例如,如果你的路由配置为/page1reload()方法会将当前页面的视口重置为最初的状态,然后再跳转到/page2页面。

      1. 使用Vue Router的beforeEnter钩子: ```javascript import Vue from 'vue'; import Router from 'vue-router'; import VueRouterPlugin from 'vue-router-plugin-hash'; import routes from './router'; import App from './App.vue';

      const router = new VueRouter({ mode: 'history', routes: routes, beforeEnter(to, from, next) { // 在路由跳转后返回上一页的代码 next({ path: '/page1' }); }, });

      new VueRouterPlugin(router);

      new Vue({ render: h => h(App), }).$mount('#app'); ```

      beforeEnter钩子中,你可以编写在路由跳转后返回上一页的代码。例如,next({ path: '/page1' });会在当前页面被激活时将用户重定向到/page1页面。

      以上就是在Vue路由跳转后返回上一页的基本实现方式,你可以根据实际需求选择合适的方法。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部