存在这样一个路由
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: '/home/index', children: [ { path: 'index', name: 'index', component: Index } ] } ]