Vue 路由器不遵循子路径

Question

我在使 http://localhost:8080/myapps/config route load. If I use http://localhost:8080/myapps everything works ok and I get a list of my apps. But when I want to access an app config through 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'
                    }
                }
           ]
     }
]}

Answer 1

您没有 post 您的 *.vue 组件，但我认为您在第二级组件中缺少 <router-view>。

示例：

MainView 映射到 / 并且有 1 个子路由 (/myapps)。您可能在 MainView.

中使用了 <router-view>

MyApps 作为 /-路由的子路由映射到 myapps，并且有 1 个子路由 (/config)。

将 <router-view 添加到您的 MyApps.vue 以让它显示其子项（在您的情况下只是 /config）。

Similarly, a rendered component can also contain its own, nested <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/

Vue 路由器不遵循子路径

Vue router not following children paths

vue.js

vue-router