Vue Router访问内层页面时侧边栏导航链接路径异常问题求助

问题根因 #

问题出在你的侧边栏导航链接使用了相对路径配置。Vue Router解析相对路径的to属性时，会基于当前页面的完整路由路径做拼接：

• 当你处于/project/[项目ID]/overview这类一级子路由时，相对路径areas会被拼接为/project/[项目ID]/areas，符合预期
• 当你处于/project/[项目ID]/vaccination/outer这类二级子路由时，相对路径overview会被拼接为/project/[项目ID]/vaccination/overview，就出现了多出来vaccination前缀的问题

解决方案 #

两种方案选一种即可，推荐第二种可维护性更高：

方案1：将导航链接改为绝对路径 #

你的侧边栏组件已经通过props拿到了projectId参数，直接把所有<router-link>的to属性从相对路径改为拼接父路由前缀的绝对路径：

<!-- 原来的写法 -->
<router-link :to="item.path">{{ item.name }}</router-link>

<!-- 修改后的写法 -->
<router-link :to="`/project/${projectId}/${item.path}`">{{ item.name }}</router-link>

子菜单的路径（比如vaccination/outer）也适用该规则，自动会生成正确的完整路径。

方案2：使用命名路由跳转（更推荐） #

先给所有子路由补充唯一的name属性（注意你现有配置里vaccination/outer和archived的name重复了，要修正）：

children: [
    {
        path: 'overview',
        name: 'projectOverview', // 新增唯一name
        component: require('../../../assets/js/components/Template/mvdProjectOverview.vue'),
    },
    {
        path: 'areas',
        name: 'projectAreas', // 新增唯一name
        component: require('../../../assets/js/components/Template/AddVaccinationArea.vue'),
    },
    // 其他所有子路由都补充唯一name，注意不要重复
    {
        path: 'vaccination/outer',
        name: 'projectOuterVaccinations',
        component: require('../../../assets/js/components/Template/OuterVaccinations.vue'),
    },
    {
        path: 'archived',
        name: 'projectArchived', // 修正重复的name
        component: require('../../../assets/js/components/Template/ArchivedRecords.vue'),
    },
]

然后侧边栏的导航链接用name + params的形式跳转，不需要手动拼接路径：

<router-link :to="{name: item.routeName, params: {projectId: projectId}}">
    {{ item.name }}
</router-link>

同时修改你的侧边栏配置，给每个导航项补充对应的路由name即可。

内容的提问来源于stack exchange，提问作者Rutvik D Mehta