Vue路由器不遵循子路径答案

【问题标题】：Vue router not following children pathsVue路由器不遵循子路径
【发布时间】：2019-02-22 14:47:29
【问题描述】：

我在加载 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'
                    }
                }
           ]
     }
]}

【问题讨论】：

你的应用中有吗？

标签： vue.js vue-router

【解决方案1】：

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

例子：

MainView 映射到 / 并有 1 个子路由 (/myapps)。您可能在 MainView 中使用了 <router-view>。

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/

【讨论】：