vue-router 嵌套路由书写顺序问题

NeoChang
  • 1.4k

问题如图:
如果我的 /user/:username 写到这个位置,那么我的 /user/task 路由就失效,未报错。
但前端点击相关链接,浏览器地址栏变化为 http://localhost:8080/user/task,但内容是 /user/info的内容。
clipboard.png

若将 /user/:username 写到所有子路的下面,也就是如图。一切正常。
迷惑不解,文档在嵌套路由中没有相关的问题说明。
请有经验的朋友指点一二。

clipboard.png

回复
阅读 3.3k
3 个回答
✓ 已被采纳

这和子路由没有直接关系的,而是路由是从上到下匹配的,你的/user/:username这个路由是能匹配到/user/task和/user/info的。会把task和info识别为username,所以要不/user/:username写在最后面

命名冲突:username匹配的是/user/这个目录下的所有路径
/user/1,/user/list等都会匹配到
vue-router中有一句话: 同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。
所以你的:username写到第二位下面的都匹配不到
你可以试试放到最后

提醒一下,当使用路由参数时,例如从 /user/foo 导航到 /user/bar,原来的组件实例会被复用。因为两个路由都渲染同个组件,比起销毁再创建,复用则显得更加高效。不过,这也意味着组件的生命周期钩子不会再被调用。

复用组件时,想对路由参数的变化作出响应的话,你可以简单地 watch (监测变化) $route 对象:

const User = {
template: '...',
watch: {

'$route' (to, from) {
  // 对路由变化作出响应...
}

}
}
或者使用 2.2 中引入的 beforeRouteUpdate 守卫:

const User = {
template: '...',
beforeRouteUpdate (to, from, next) {

// react to route changes...
// don't forget to call next()

}
}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏