Vue Router Sidebar 导航项 link 在访问内页时发生变化

Question

我在 Vue JS 中有一个 SPA 应用程序，我有一个侧面导航栏，我希望它在所有页面上都可见。我在侧面导航栏中设置了以下链接

        {
            name: 'Overview',
            icon: 'ti-dashboard',
            path: 'overview',

        },
        {
            name: 'Areas',
            icon: 'ti-map-alt',
            path: 'areas',
        },
        {
            name: 'Assignments',
            icon: 'ti-check-box',
            path: 'assignments',

        },
        {
            name: 'Records',
            icon: 'ti-view-list-alt',
            id: 'third-party',
            children: [
                {
                    name: 'Vaccination',
                    path: 'vaccination',
                },
                {
                    name: 'Out-of-Area Vaccinations',
                    path: 'vaccination/outer',
                },
                {
                    name: 'Surveys',
                    path: 'survey',
                },
                {
                    name: 'Archived',
                    path: 'archived',
                },
            ],
        }
        ...

以下是我的路由器设置

const routes = [
    {
        path: '/',
        component: App,
    },
    {
        path: '/login',
        component: require('../../../assets/js/components/Template/AppLogin.vue'),
    },
    {
        path: '/platform/projects',
        component: require('../../../assets/js/components/Template/Projects.vue'),
        meta: {requiresAuth: true},
    },
    {
        path: '/project/:projectId',
        component: require('../../../assets/js/components/Template/UIComponents/SidebarPlugin/SideBarNew.vue'),
        props: route => ({projectId: route.params.projectId}),
        children: [
            {
                path: 'overview',
                component: require('../../../assets/js/components/Template/mvdProjectOverview.vue'),
            },
            {
                path: 'areas',
                component: require('../../../assets/js/components/Template/AddVaccinationArea.vue'),
            },
            {
                path: 'assignments',
                component: require('../../../assets/js/components/Template/AssignAreaUsers.vue'),
            },
            {
                path: 'vaccination',
                component: require('../../../assets/js/components/Template/VaccinationRecord.vue'),
            },
            {
                path: 'vaccination/outer',
                name: 'projectOuterVaccinations',
                component: require('../../../assets/js/components/Template/OuterVaccinations.vue'),
            },
            {
                path: 'archived',
                name: 'projectOuterVaccinations',
                component: require('../../../assets/js/components/Template/ArchivedRecords.vue'),
            },
            {
                path: 'survey',
                component: require('../../../assets/js/components/Template/Surveys.vue'),
            },
            ...

const router = new VueRouter({
    routes,
    mode: 'history'
})

当我访问vaccination/outer时，我所有的侧边栏导航链接都附加了疫苗接种

附上图片更清晰

这里URL很好，应该只保持这样

当我导航到 vaccination/outer

问题：现在所有链接都在疫苗接种之间

我对 VUE ROUTER 和 ROUTER 有非常基本的了解 LINK。帮助或指导会很棒。提前致谢。

Answer 1

我很确定您使用的是来自呈现数组的路径：<router-link to="LINK">some label</router-link>。但是，由于您的路径值不是以 / 开头 - vue 路由器会将 to 属性的值添加到当前 URL 而不是替换它。

假设我在 /a/b/c URL.
当我点击 <router-link to="dogs">Dogs</router-link> - 我将被重定向到 /a/b/c/dogs.
当我点击 <router-link to="/dogs">Dogs</router-link> - 我将被重定向到 /dogs.

您需要做的就是以斜线开始路径。因此，不要使用路径：vaccination/outer，而是使用路径：/vaccination/outer，它将按您的意愿工作。

Vue Router Sidebar 导航项 link 在访问内页时发生变化

Vue Router Sidebar navigation item link changes while visiting inner pages

vue.js

vue-router

vuejs2