Блог

У меня есть приложение SPA в Vue JS, у меня есть боковая панель навигации, которую я хочу видеть на всех страницах. У меня есть следующие ссылки, настроенные на боковой панели навигации

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

Когда я посещаю вакцинацию/наружную, все мои навигационные ссылки на боковой панели добавляются с помощью вакцинации

Прикрепление изображений для большей четкости

1. Здесь URL-адрес хорош и должен оставаться таким только

2. Когда я перехожу к вакцинации/внешней

3. Проблема: теперь все связи между вакцинацией

У меня есть очень базовые знания о МАРШРУТИЗАТОРЕ VUE и ССЫЛКЕ МАРШРУТИЗАТОРА. Помощь или руководство было бы здорово. Заранее спасибо.

Я почти уверен, что вы используете пути из представленного массива как: <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 .

Все, что вам нужно сделать, это начать пути с косой черты. Поэтому вместо path: vaccination/outer используйте path: /vaccination/outer и он будет работать так, как вы хотите.