我试图有一个包含2个列表的标签页的主页,默认情况下打开1。
我有以下路由配置,我更改了名称以简化
let routes = [{
path: '/',
name: 'home',
component: require('./views/Home.vue'),
children: [{
path: 'list1',
name: 'home.list1',
component: require('./views/List1.vue')
}, {
path: 'list2',
name: 'home.list2',
component: require('./views/List2.vue')
}]
}
在./views/Home.vue
中,每个选项卡(子路由)的<router-view></router-view>
低于2 <router-link>
。
当我访问应用程序路由http://domain/
时,我想激活list1
选项卡。目前唯一可以激活的方法是访问http://domain/list1
。
我试过了
children: [{
path: '',
name: 'home.list1'
这最初工作得很好,但是如果我访问http://domain/list2
,我的两个标签链接(路由器链接)都具有活动状态。
JSFiddle,我无法运行它,但它有助于了解上下文
有没有更好的解决办法?
5条答案
按热度按时间vs91vp4v1#
再添加一个带重定向的子路由(应首先添加)
roejwanj2#
要使组件(选项卡)在访问父路由时显示为默认值,您需要添加路径“”(空字符串)
以下是来自Vue工艺路线文档的示例
不要使用“/”,它将被视为根路由。
iqxoj9l93#
我需要把重定向放在父页面上,它在第一次加载时有效。否则,它只在我重新加载页面时有效。
希望能成功。
dldeef674#
我认为如果你的回家路线不是“/”,你想做的事情就会起作用
这将加载home组件和list 1组件,然后您可以使用router link to nav to list 2:
或者,也许我不明白你的问题。
bogh5gae5#
以下是行之有效的方法。
您必须在父路由
'home'
上使用redirect: {name: 'home.list1'}
(用于命名路由)属性。确保对named route(如上所述)或path使用正确的重定向属性格式:
redirect: '/list1'
.以下是正确的路由配置,与您的配置只有1行(
redirect
行)不同:然后,每次访问
/
(您的'home'
路由)都会被重定向到/list1
。此外,
router-link-active
和router-link-exact-active
将被正确分配到子链路(两者)和父链路(仅router-link-active
)。这也适用于嵌套较深的非子布线和子布线。
欲了解更多重定向和别名选项,请参阅official docs。