Skip to main content
 首页 » 编程设计

javascript之Vue.js 路由器不显示正确的子路由

2023年08月27日46kerrycode

我在使用 Vue.js 路由器时遇到问题。正如标题所暗示的,这个问题是关于一个只显示父路由页面的子路由。例如,有一个指向您的帐户详细信息的路径 www.example.com/account。然后,在您的帐户中,您可以看到不同的项目,这些项目将在 www.example.com/account/project/foobar 路径下可用,其中 project/foobar 是一个 child /accountfoobar 的路由是一个动态参数。现在,当您转到某个项目时,您希望看到该项目,但您仍然会看到帐户页面。

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

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> 

直接转到 URL(没有通过链接或其他任何方式进行路由导航),也只显示帐户页面,所以我很确定这不是由于某种原因无法正常工作的转换。控制台中没有错误或警告。

我完全没有选择。我希望你能帮助我。谢谢你的时间! :)

请您参考如下方法:

帐户页面需要一个 <router-view>渲染子路由。如果您不希望项目页面在帐户页面内呈现,那么它不应该是帐户页面的子路由。

你可能想要这样的路由配置:

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

您可以将项目路由设置为/account/project/:id但它不会是帐户路由的子路由,即使它以 /account 为前缀.