第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

Vue.js 路由器不顯示正確的子路由

Vue.js 路由器不顯示正確的子路由

慕勒3428872 2022-01-07 21:04:31
我遇到了 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í)間!:)
查看完整描述

2 回答

?
明月笑刀無(wú)情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

帳戶(hù)頁(yè)面需要一個(gè)<router-view>來(lái)呈現(xiàn)子路由。如果您不希望項(xiàng)目頁(yè)面呈現(xiàn)在帳戶(hù)頁(yè)面內(nèi),那么它不應(yīng)該是帳戶(hù)頁(yè)面的子路由。


您可能需要這樣的路由配置:


{

    path: '/account',

    component: AccountPage,

    meta: {

        title: 'Your account'

    },

},

{

    path: 'project/:id',

    component: ProjectPage,

    props: true,

    meta: {

        title: 'Project'

    }

}

您可以將項(xiàng)目路由設(shè)置為,/account/project/:id但它不會(huì)是帳戶(hù)路由的子路由,即使它帶有前綴/account。


查看完整回答
反對(duì) 回復(fù) 2022-01-07
?
小怪獸愛(ài)吃肉

TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超1個(gè)贊

由于 arouter-view是父組件所必需的,因此您可以以這種方式保留子組件,并且每個(gè)子組件將呈現(xiàn)在完全不同的頁(yè)面上:


{

    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'

        },

    ]

}


查看完整回答
反對(duì) 回復(fù) 2022-01-07
  • 2 回答
  • 0 關(guān)注
  • 291 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)