vue使用$router.push路由跳转后,不能返回问题,以及$route、$router介绍
从A页面跳转到B页面,B页面有子路由,使用$router.push跳转后,点击浏览器返回按钮,发现不能返回到上一个页面(A页面)。解决方法this.$router.push改为 this.$router.replace两者区别$router.push({path:'home'})本质是向history栈中添加一个路由,在我们看来是切换路由,但本质是在添加一个history记录$router.rep
·
从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
更多推荐
已为社区贡献25条内容
所有评论(0)