vue-router嵌套路由定向问题

Question

存在这样一个路由

routes: [
    {
      path: '/home',
      name: 'home',
      component: Nav,
      children: [
        {
          path: 'index',
          name: 'index',
          component: Index
        }
      ]
     }
    ],
        

Nav组件中的模板是这样的

<template>
  <div id="mains">
    <div class="navigation">
      <dl>
        <dt>首页</dt>
        <dt>其它</dt>
     </dl>
    </div>
    <router-view/>
  </div>
</template>

当访问/home/index时,没有任何问题，Nav和Index组件都会渲染出来，Index来源于Nav中的router-view。
当访问/home/时,由于嵌套路由的原因，只有Nav会被渲染出来，Nav中的router-view会被忽略。
好比下次图，Nav的地方会被渲染出来，而Index的地方会一片空白

我想实现的是效果是访问/home/出现/home/index的页面。
琢磨了一下，我是通过一下方式实现,用一个路由路径作为中转进行重定向。

routes: [
    {
      path: '/home',
      name: 'home',
      component: Nav,
      redirect: '/',
      children: [
        {
          path: 'index',
          name: 'index',
          component: Index
        }
      ]
     },
     ,
    {
      path: '/',
      redirect: '/home/index'
    },
   ],

这样能达到我想要的效果，但是感觉这样写似乎显得很冗余，请问有其它更好的方法实现吗？

Answer 1

解决方案

routes: [
    {
      path: '/home',
      name: 'home',
      component: Nav,
      redirect: '/home/index',
      children: [
        {
          path: 'index',
          name: 'index',
          component: Index
        }
      ]
     }
    ],