Vue Router 侧边栏导航项链接在访问内页时发生变化

Posted 2023-02-16

【中文标题】Vue Router 侧边栏导航项链接在访问内页时发生变化

【英文标题】：Vue Router Sidebar navigation item link changes while visiting inner pages

【发布时间】：2021-11-26 10:20:26

【问题描述】：

我在 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 我所有的侧边栏导航链接都附加了 vaccination

附加图片更清晰

这里的 URL 很好，应该只是这样

当我导航到疫苗接种/外部

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

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

【参考方案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，它会按照您的意愿工作。

【讨论】：

您好，感谢您的信息。我已经尝试过了，但是它把我的 URL 变成了“127.0.0.1:8000/vaccination/outer”而不是“127.0.0.1:8000/project/1068/vaccination/outer”

不是基本网址吗？你试过设置吗？：router.vuejs.org/api/#base

不！基本 URL 应仅为 127.0.0.1:8000。我没有在路由器配置中设置任何默认的基本 URL。对于与项目相关的所有页面，我确实需要 /project/1068/。

所以使用计算构建路径：/project/$this.$route.params.projectId/rest/of/your/url

使用计算工作构建路径。感谢您的帮助！