Vue3框架中点击返回上一个路由地址不生效的解决办法和代码

2024-03-18

Vue3框架中点击返回上一个路由地址不生效的解决办法和代码

在用Vue3框架做网站建设时,在取得上一个页面路由地址的情况下做了一个返回按钮,但点击返回后页面却没有反应,这个如何解决呢?

重复点击触发到当前路由,点击this.$router.go(-1),则还是会返回点击点的重复路由,解决办法如下:

进入页面的时候记录下进来的路由信息,存为全部变量,点击返回时切换到进来的路由

在vue生命周期里面加(记得在data里面声明pathEnterUrl)

beforeRouteLeave:离开路由之前执行的函数。

next();  下一步 ,放不放行,必须有这个,相当于一个按钮开启一样。

from 记录来的路由信息,to记录跳转目的路由信息

beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.pathEnterUrl = from.fullPath
        })
    }

goback代码:

 goBack() {
            this.$router.push({ path: `${this.pathEnterUrl}` })
        },

好了,通过以上代码就能解决在取得上一个页面路由地址的情况下做了一个返回按钮,但点击返回后页面却没有反应的问题了。