Vue.js 路由器不顯示正確的子路由
我遇到了 Vue.js 路由器的問(wèn)題。正如標(biāo)題所示,這個(gè)問(wèn)題是關(guān)于只顯示父路由頁(yè)面的子路由。例如,您的帳戶(hù)詳細(xì)信息有一個(gè)路徑www.example.com/account。然后,在您的帳戶(hù),你可以看到不同的項(xiàng)目,這將是可用的路線(xiàn)www.example.com/account/project/foobar那里project/foobar是一個(gè)孩子的路線(xiàn)/account和foobar是一個(gè)動(dòng)態(tài)參數(shù)?,F(xiàn)在,當(dāng)您進(jìn)入一個(gè)項(xiàng)目時(shí),您希望看到該項(xiàng)目,但您仍然會(huì)看到帳戶(hù)頁(yè)面。這是我遇到的問(wèn)題。我覺(jué)得一切都設(shè)置正確,但代碼無(wú)論如何都顯示在下面。路由器.jsconst 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(); }); }) .forEach(tag => document.head.appendChild(tag)); next();});我四倍檢查了我是否使用了正確的組件,并且我 100% 確定我這樣做了。不過(guò),它只是一直顯示帳戶(hù)頁(yè)面而不是項(xiàng)目頁(yè)面。我確實(shí)注意到標(biāo)題因更改元標(biāo)記的代碼而發(fā)生了變化,這意味著它知道下一頁(yè)是項(xiàng)目頁(yè)面。我還檢查了函數(shù)參數(shù)to包含的內(nèi)容,并很快發(fā)現(xiàn)這是它想要去的項(xiàng)目路線(xiàn),這完全有道理。項(xiàng)目頁(yè)面.vue<template> <transition name="project-anim"> <div> Foo BAR </div>< /transition></template><script> import MeineProject from '../../components/meine/project'; export default { components: { MeineProject } }</script>直接轉(zhuǎn)到 URL(沒(méi)有通過(guò)鏈接或任何東西進(jìn)行路由導(dǎo)航),也只顯示帳戶(hù)頁(yè)面,所以我很確定這不是由于某種原因無(wú)法正常工作的轉(zhuǎn)換??刂婆_(tái)中沒(méi)有錯(cuò)誤或警告。我完全沒(méi)有選擇。我希望你能幫助我。謝謝你的時(shí)間!:)
查看完整描述