場景：

打算訪問 /parent/child1 和 /parent/child2 ，但產生問題是：子頁面一直空白顯示

# route.js 產生問題示例 {path: '/parent',children: [{path: 'child1',component: () => import('@/pages/network/child1'),},{path: 'child2',component: () => import('@/pages/network/child2'),},]},

方法一： 修改route.js

在父路由中加入component: { render: (e) => e("router-view") }
等同于 在父頁面 加入<router-view />

# route.js {path: '/parent',component: { render: (e) => e("router-view") }, # 重點children: [{path: 'child1',component: () => import('@/pages/network/child1'),},{path: 'child2',component: () => import('@/pages/network/child2'),},]},

方法二： 修改 父頁面

在父頁面寫入 <router-view />， route.js 不用改變

#route.js {path: '/parent',children: [{path: 'child1',component: () => import('@/pages/network/child1'),},{path: 'child2',component: () => import('@/pages/network/child2'),},]},# parent.vue <template><div id="parent"><router-view /></div> </template>

總結

以上是生活随笔為你收集整理的【Vue】 vue-Router children 子组件空白显示，没有内容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。