關於使用vue-router的嵌套路由的命名路由時踩的坑

今天在做我的模仿微博項目時，我想實現點擊router-link后，跳轉到微博正文頁面，並渲染其嵌套視圖-評論組件。但是在實際實現時，我發現頁面可以正常跳轉，但是在頁面加載后，並不渲染該頁面的嵌套視圖，但是在點擊該嵌套視圖所對應的嵌套路由后，該嵌套視圖會進行渲染。並且，我的另一個頁面的嵌套視圖可以正確的進行初始渲染。仔細的查看后，我懷疑問題在於命名路由，可以正常渲染的視圖未使用命名路由，不能正常使用的路由使用了命名路由。

故刪除命名路由的name並修改其對應路由的to屬性，從:to="{name: ..., params: {...}}"修改成:to="`/.../${...}`"

以下放代碼

原代碼

routes.js
const routes = [
    {...},
    {
        path: '/weibo/:weiboId', 
        component: vWeibo, 
        name: 'weibo',
        children: [
            {path: '', component: ...},
            ...
        ]
    },
    ...
];
...

home.vue
...
<router-link
    ...
    :to="{name: 'weibo', params: {weiboId: ...}}"
>
...

weibo.vue
...
<router-link
    ...
    :to="{path: `/weibo/${$route.params.weiboId}`}"
    replace
>
...
<router-view></router-view>
...

修改后代碼

routes.js
const routes = [
    {...},
    {
        path: '/weibo/:weiboId', 
        component: vWeibo, 
        children: [
            {path: '', component: ...},
            ...
        ]
    },
    ...
];
...

home.vue
...

<router-link
    ...
    :to="`weibo/${weibo.weiboId}`"
>
...

weibo.vue
...
<router-link
    ...
    :to="{path: `/weibo/${$route.params.weiboId}`}"
    replace
>
...
<router-view></router-view>
...