vue.js - vue-router嵌套路由定向问题

问题描述

问 题

存在这样一个路由

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'
    },
   ],

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

这个问题已被关闭，原因：问题已解决 - 问题已解决，且对他人无借鉴意义

解决方案

解决方案

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

这篇关于vue.js - vue-router嵌套路由定向问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！