请教个前端 vueRouter 问题

2021-01-20 18:50:17 +08:00
 muunala10221
我有两个路由 A 和 B,下级有很多名字相同的组件.
假设我在 B 页面切换,$router.push 一个 A 和 B 的 children 下相同名字的组件,就会跳转到 A 的下面,有什么办法可以解决吗?
1183 次点击
所在节点    程序员
13 条回复
Tlin
2021-01-20 18:58:33 +08:00
说的有点懵。你是 A 、B 页面都是用相同的组件,但是 B 页面路由 push 后会跳到 A 页面? push 里面的参数是一些路由信息配置,看看有错没,此外看引入的组件里面看有没有路由跳转,通常 A 引入组件跟 B 引入组件不冲突
Carseason
2021-01-20 19:01:07 +08:00
绝对路径跳转
muunala10221
2021-01-20 19:03:39 +08:00
@Tlin 不好意思 没表达清楚 /a/1 /b/1 假如我当前处于 /b 下 我想跳转到 /b/1 这时候我$router.push(name : 1) 就会跳转到 /a/1 下
muunala10221
2021-01-20 19:04:36 +08:00
@Carseason 我查一下 感谢哈
xingyuc
2021-01-20 19:11:19 +08:00
name 区分或者写全路径
Tlin
2021-01-20 19:16:24 +08:00
看官网的编程式导航后面的一句话“注意: 如果目的地和当前路由相同,只有参数发生了改变 (比如从一个用户资料到另一个 /users/1 -> /users/2),你需要使用 beforeRouteUpdate 来响应这个变化 (比如抓取用户信息)。”
当然你可以试试绝对路径

可以转变策略,嵌套路由
https://router.vuejs.org/zh/guide/essentials/nested-routes.html
OHyn
2021-01-20 19:24:19 +08:00
router.push ( path:‘xxxxx’)用这个 API 。
wunonglin
2021-01-20 19:45:07 +08:00
你这问题和我当年在 sf 的问的问题一样。

https://segmentfault.com/q/1010000017007660?_ea=13033647

解决方法是只能是用绝对路径。所以鉴于一些问题以及这个问题,我跳坑到 ng 了。

世间美好
wunonglin
2021-01-20 19:58:44 +08:00
安利下 ng 的导航方法
```
// http://127.0.0.1/user/1?page=1#header
// params 的话,像这个 id,放数值后面就行了
this.Router.navigate(['/user', id], {
// 相对于当前路由导航,去掉就会按照根目录导航
relativeTo: this.ActivatedRoute,
// 设置查询参数
queryParams: {
page: 1
},
// 可以合并上面的参数和原本 url 上的参数,也可以完全替换为上面的参数
queryParamsHandling: 'merge',
// 可以设置锚点
fragment: 'header',
})
```
lin07hui
2021-01-21 08:09:18 +08:00
/a/1 和 /b/1 的 name 不能相同
{ path: '/a/1', name: 'a1', ... }
{ path: '/b/1', name: 'b1', ... }
$router.push(name : 'a1')
$router.push(name : 'b1')
rodrick
2021-01-21 09:24:50 +08:00
1. name 不要一样,2. 写全路径 /a/1 or /b/1
muunala10221
2021-01-21 09:31:18 +08:00
好的谢谢
muunala10221
2021-01-21 09:31:25 +08:00
@wunonglin 谢谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/746797

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX