vue.js - vue-router嵌套路由定向问题
本文介绍了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屋!
查看全文