亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

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

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

慕勒3428872 2022-01-07 21:04:31
我遇到了 Vue.js 路由器的問題。正如標題所示,這個問題是關于只顯示父路由頁面的子路由。例如,您的帳戶詳細信息有一個路徑www.example.com/account。然后,在您的帳戶,你可以看到不同的項目,這將是可用的路線www.example.com/account/project/foobar那里project/foobar是一個孩子的路線/account和foobar是一個動態參數?,F在,當您進入一個項目時,您希望看到該項目,但您仍然會看到帳戶頁面。這是我遇到的問題。我覺得一切都設置正確,但代碼無論如何都顯示在下面。路由器.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% 確定我這樣做了。不過,它只是一直顯示帳戶頁面而不是項目頁面。我確實注意到標題因更改元標記的代碼而發生了變化,這意味著它知道下一頁是項目頁面。我還檢查了函數參數to包含的內容,并很快發現這是它想要去的項目路線,這完全有道理。項目頁面.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(沒有通過鏈接或任何東西進行路由導航),也只顯示帳戶頁面,所以我很確定這不是由于某種原因無法正常工作的轉換??刂婆_中沒有錯誤或警告。我完全沒有選擇。我希望你能幫助我。謝謝你的時間!:)
查看完整描述

2 回答

?
明月笑刀無情

TA貢獻1828條經驗 獲得超4個贊

帳戶頁面需要一個<router-view>來呈現子路由。如果您不希望項目頁面呈現在帳戶頁面內,那么它不應該是帳戶頁面的子路由。


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


{

    path: '/account',

    component: AccountPage,

    meta: {

        title: 'Your account'

    },

},

{

    path: 'project/:id',

    component: ProjectPage,

    props: true,

    meta: {

        title: 'Project'

    }

}

您可以將項目路由設置為,/account/project/:id但它不會是帳戶路由的子路由,即使它帶有前綴/account。


查看完整回答
反對 回復 2022-01-07
?
小怪獸愛吃肉

TA貢獻1852條經驗 獲得超1個贊

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


{

    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'

        },

    ]

}


查看完整回答
反對 回復 2022-01-07
  • 2 回答
  • 0 關注
  • 301 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號