代码之家 › 专栏 › 技术社区 › Notbad

Vue路由器不遵循子路径

vue-router vue.js

Notbad · 技术社区 · 6 年前

我很难做出正确的决定 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 回复 | 直到 6 年前

Bennett Dams 6 年前

你没有发布你的 *.vue <router-view> 在第二级组件中。

例子:

MainView / 有一个孩子( /myapps ). 你可能在用 <路由器视图> 在你的 主视图 .

MyApps myapps 作为一个孩子 / /config

添加 <router-view MyApps.vue 让它显示它的子对象(这只是在你的情况下)。

<路由器视图> .

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

/我的应用程序 /myapps/config ),两者都由的 <路由器视图> .

以下是文档中的一个工作示例:

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