Маршрутизатор Vue не следует дочерним путям - PullRequest
Новая
       10

Маршрутизатор Vue не следует дочерним путям

0 голосов
/ 18 сентября 2018

У меня проблемы с загрузкой маршрута http://localhost:8080/myapps/config.Если я использую http://localhost:8080/myapps, все работает нормально, и я получаю список своих приложений.Но когда я хочу получить доступ к конфигурации приложения через http://localhost:8080/myapps/config, он снова загружает содержимое / myapps.Тем не менее, URL в моем браузере показывает правильный путь /myapps/config.

Я проверял роутер в течение нескольких часов, но все вроде бы нормально.Кто-нибудь может пролить свет?

Мой файл роутера: 

import Vue from 'vue'
import Router from 'vue-router'

const MyApps = () => import('../views/app/subviews/MyApps');
const AppKeyValue = () => import('../views/app/subviews/AppKeyValue');

import MainView from '../views/app/MainView'

Vue.use(Router)

export default new Router({
    mode: 'history',
    routes: 
    [
        {
            path: '/',
            component: MainView,
            redirect: 'myapps',
            children: 
            [
                {
                    path: 'myapps',
                    component: MyApps,
                    meta: 
                    {
                        requiresAuth: true,
                        breadcrumb: 'My Apps'
                    },
                    children:
                    [
                        {
                            path: 'config',
                            component: AppKeyValue,
                            meta: 
                            {
                                requiresAuth: true,
                                breadcrumb: 'App configuration'
                            }
                        },
                    ]

                },
            ]
        },
    ]
})

Все работает нормально, если я не использую дочерние маршруты: 

export default new Router({
    mode: 'history',
    routes:
    [
        {
            path: '/',
            component: MainView,
            redirect: 'myapps',
            children: 
            [
                {
                    path: 'myapps',
                    component: MyApps,
                    meta: 
                    {
                        requiresAuth: true,
                        title: 'message.ecommerce',
                        breadcrumb: 'My Apps'
                    },
                },
                {
                    path: 'myapps/config',
                    component: AppKeyValue,
                    meta: 
                    {
                        requiresAuth: true,
                        title: 'message.ecommerce',
                        breadcrumb: 'App configuration'
                    }
                }
           ]
     }
]}

1 Ответ

0 голосов
/ 18 сентября 2018

Вы не опубликовали свои *.vue компоненты, но я предполагаю, что вы пропустили <router-view> в компоненте второго уровня.

Пример:

MainView сопоставлен с/ и имеет 1 детский маршрут (/myapps).Вы, вероятно, используете <router-view> в своем MainView.

MyApps сопоставлен с myapps как дочерний маршрут / и имеет 1 дочерний маршрут (/config).

Добавьте <router-view к вашему MyApps.vue, чтобы он отображал свои дочерние элементы (в вашем случае это просто /config).

Аналогично, визуализированный компонент также можетсодержат свои собственные, вложенные <router-view>.

https://router.vuejs.org/guide/essentials/nested-routes.html#nested-routes

КСТАТИ: Именно поэтому работает ваша вторая конфигурация маршрутизатора: у основного маршрута есть два дочерних элемента (/myapps и /myapps/config), которые оба отображаютсяMainView <router-view>.

Вот рабочий пример из документации:

https://jsfiddle.net/nazgul_mamasheva/zrcLe9z7/1/

...