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

Question

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

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

Answer 1

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

Answer 2

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

Answer 3

提醒一下，当使用路由参数时，例如从 /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()

}
}