Vue嵌套子路由跳转路径异常：点击Account跳转至/account而非/settings/account

该问题由子路由路径配置规则使用错误导致，Vue Router 有明确的路由拼接规则：

• 子路由的path属性如果以/开头，会被识别为根级绝对路径，不会继承拼接父路由的路径前缀
• 只有不以/开头的子路由path，才会和父路由的path拼接生成完整路由路径

你当前配置中Account子路由的path设置为/account，属于根绝对路径，因此直接匹配/account路由，不会拼接父路由的/settings前缀。

1. 修改路由配置 #

将Account子路由的path开头的/删除，改为相对父路由的路径即可：

{
  path: "/settings",
  name: "Settings",
  component: Settings,
  children: [{
      path: "",
      name: "Profile",
      component: Profile
    },
    {
      path: "account", // 移除开头的/，使用相对路径
      name: "Account",
      component: Account
    }
  ]
}

修改后Account路由的完整路径会自动拼接为/settings/account，符合预期。

2. 可选优化 #

你当前Settings.vue中Profile的跳转目标配置为to="/"，点击会直接跳转到站点首页，如果你需要跳转到设置页默认的Profile子路由，可以修改为命名路由跳转，逻辑更统一：

router-link(:to="{name: 'Profile'}")
  button(class='hover:text-blue-500 focus:outline-none')
    | Profile
router-link(:to="{name: 'Account'}")
  button(class='hover:text-blue-500 focus:outline-none')
    | Account
router-view

内容的提问来源于stack exchange，提问作者Dave