关于使用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>
...