vue使用$router.push路由跳转后，不能返回问题，以及$route、$router介绍

2024-01-16 10:32| 来源: 网络整理| 查看: 265

从A页面跳转到B页面，B页面有子路由，使用$router.push跳转后，点击浏览器返回按钮，发现不能返回到上一个页面（A页面）。

解决方法

this.$router.push 改为 this.$router.replace

两者区别

$router.push({path:'home'})本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

$router.replace({path:'home'})替换路由，没有历史记录，点击返回，会跳转到上一个页面。

下面再扩展一下$router 、$route 1.this.$router

是VueRouter的一个对象，表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法。

2.this.$route

表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法。

push 传递参数和接收参数

1.通过name，路由名称 2.通过path，路由路径

//字符串 this.$router.push(name) this.$router.push(path) //对象 //传参:name搭配params （类似post），地址栏里看不到参数（看不到id）xxx/1 this.$router.push({ name:'xxx', params:{ id:id } }) //接收参数: this.$route.params.id //传参: path搭配query （类似get），地址栏里可以看到参数（会显示id）xxx?id=1 this.$router.push({ path:'/xxx', query:{ id:id } }) //接收参数: this.$route.query.id

【本文地址】

公司简介

联系我们