Javascript Vue.js路由器未显示正确的子路由

我对Vue.js路由器有问题。正如标题所示，本期讨论的是仅显示父路由页面的子路由。例如，您的帐户详细信息有一个路径

www.example.com/account

。然后，在您的帐户中，您可以看到不同的项目，这些项目将通过路由

www.example.com/account/project/foobar

提供，其中

project/foobar

是

/account

的子路由，而

foobar

是一个动态参数。现在，当您转到一个项目时，您希望看到该项目，但仍然会看到帐户页面

这是我的问题。我觉得一切都设置正确，但代码仍显示在下面

router.js

const routes = [
    ..., // other routes
    {
        path: '/account',
        component: AccountPage,
        meta: {
            title: 'Your account'
        },
        children: [
            {
                path: 'project/:id',
                component: ProjectPage,
                props: true,
                meta: {
                    title: 'Project'
                }
            }
        ]
    }
];

const router = new VueRouter({
    routes,
    mode: 'history'
});

// Sets meta tags in the HEAD tag to, for example, change the title.
router.beforeEach((to, from, next) => {
    const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);

    const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
    const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);

    if(nearestWithTitle) document.title = nearestWithTitle.meta.title;

    Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));

    if(!nearestWithMeta) return next();

    nearestWithMeta.meta.metaTags.map(tagDef => {
        const tag = document.createElement('meta');

        Object.keys(tagDef).forEach(key => {
            tag.setAttribute(key, tagDef[key]);
        });

        tag.setAttribute('data-vue-router-controlled', '');

        return tag;
    })
    .forEach(tag => document.head.appendChild(tag));

    next();
});

我检查了四倍，如果我使用了正确的组件，我100%肯定我会这样做。不过，它只是一直显示帐户页面而不是项目页面。我注意到标题的改变是因为代码改变了元标记，这意味着它知道下一个页面是项目页面。我还检查了函数参数

to

所包含的内容，并很快发现这就是它想要去的项目路线，这完全是有道理的

ProjectPage.vue

<template>
    <transition name="project-anim">
        <div>
            Foo BAR
        </div>
<    /transition>
</template>

<script>
    import MeineProject from '../../components/meine/project';

    export default {
        components: {
            MeineProject
        }
    }
</script>

富吧

从“../../components/meine/project”导入MeineProject；
导出默认值{
组成部分：{
梅内普项目
}
}

直接转到URL（没有通过链接或任何东西的路线导航），也只是显示帐户页面，所以我很确定这并不是因为某种原因转换不起作用。控制台中没有错误或警告

---

我别无选择。我希望你能帮助我。谢谢你抽出时间！：）

帐户页面需要一个

来呈现子路由。如果不希望项目页面在帐户页面内呈现，那么它不应该是帐户页面的子路由

您可能需要这样的路由配置：

{
    path: '/account',
    component: AccountPage,
    meta: {
        title: 'Your account'
    },
},
{
    path: 'project/:id',
    component: ProjectPage,
    props: true,
    meta: {
        title: 'Project'
    }
}

---

您可以将项目路由设置为

/account/project/：id

，但它不会是帐户路由的子路由，即使它的前缀是

/account

，因为

路由器视图

是父组件所必需的，因此您可以以这种方式保留子路由，并且每个子路由都将呈现在完全不同的页面上：

{
    path: '/account',
    component: {
        // render router-view into parent
        render(c) { 
            return c('router-view'); 
        }
    },
    children: [
        {
            path: '',
            component: AccountPage,
            meta: {
            title: 'Your account'
        },
        {
            path: 'project/:id',
            component: ProjectPage,
            props: true,
            meta: {
            title: 'Project'
        },
    ]
}

---

帐户页面模板是否有

？我的主

App.vue

中有一个。孩子们需要分开的吗？如果是这样的话，我猜我不应该将其作为子路由，因为我想转到一个完全不同的页面。您已经回答了您的问题：）是的，如果您不希望项目页面呈现在帐户页面中，那么它就不应该是帐户页面的子路由。太棒了！如果你愿意，你可以发布一个答案，我会接受的。