场景:

打算访问 /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>
Logo

前往低代码交流专区

更多推荐