I have a SPA App in Vue JS, I have a side navigation bar which I want to stay visible for all pages. I have following links setup in side navigation bar

        {
            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',
                },
            ],
        }
        ...

Following is my router setup

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'
})

When I visit vaccination/outer All of my side bar navigation links are appended with vaccination

Attaching images for more clarity

1. Here the URL is good and should stay like this only

2. When I navigate to vaccination/outer

3. The issue: Now all the links gets vaccination in between

I have a very basic knowledge of VUE ROUTER and ROUTER LINK. A help or guidance would be great. Thanks in advance.

CodePudding user response：

I am pretty sure you are using paths from presented array as: <router-link to="LINK">some label</router-link>. However, as your path values are not starting with / - vue router will add value of to property to the current URL instead of replace it.

Let's imagine I am on /a/b/c URL.
When I click on <router-link to="dogs">Dogs</router-link> - I will be redirected to the /a/b/c/dogs.
When I click on <router-link to="/dogs">Dogs</router-link> - I will be redirected to the /dogs.

All you need to do is, start paths with the slash. So instead of path: vaccination/outer use path: /vaccination/outer and it will work as you want to.