Vue 爬坑之旅--嵌套路由默认选中第一个子路由,并且主路由和子路由都处于激活状态
在实际开发中,嵌套路由经常会用到,基本用法也很简单,今天要说的不是嵌套路由怎么用,而是在用的过程中发现的二点小细节的处理。嵌套路由中默认选中第一个子路由在一个这样的界面中,底部的五个 tab 显然应该是五个路由,现在在首页这个路由下面又有三个 tab,那么这三个 tab 就应该使用子路由来实现,路由代码如下:{path: '/home',...
·
在实际开发中,嵌套路由经常会用到,基本用法也很简单,今天要说的不是嵌套路由怎么用,而是在用的过程中发现的二点小细节的处理。
嵌套路由中默认选中第一个子路由
在一个这样的界面中,底部的五个 tab 显然应该是五个路由,现在在首页这个路由下面又有三个 tab,那么这三个 tab 就应该使用子路由来实现,路由代码如下:
{
path: '/home',
name: 'Home',
component: Home,
children: [
{
path: 'dynamic',
name: 'dynamic',
component: Dynamic
},
{
path: 'trade',
name: 'trade',
component: HomeTrade
},
{
path: 'info',
name: 'name',
component: Info
}
]
},
这样写的话,路由是有了,点击 tab 也能进行相应的切换,但是一般情况下我们需要在点击底部 首页 的 tab 的时候让子路由默认处于选中状态并加载出数据,要想一进入页面就让第一个子路由处于选中状态,可以给主路由加一个重定向的属性,把路径指向相应的子路由。
{
path: '/home',
name: 'Home',
//重定向
redirect: '/home/dynamic',
component: Home,
children: [
......
]
},
让主路由和子路由同时处于选中状态
router-link 作为 vue 中的路由跳转标签,它内置有一个选中的状态,当处于当前路由时,会给 router-link 加一个 router-active-class,即选中状态的 class,同时还提供有一个 exact 属性,当加了 exact 属性的时候表示精确匹配,也就是会精确匹配 Url,所以如果给主路由设置了 exact 属性的话,当处于子路由时,Url 就匹配不到主路由了,那么主路由也就不会处于选中状态。所以解决办法就是不要在主路由和子路由的 router-link 上设置 exact 属性,问题即可解决。
<template>
<div id = "homeTabs" class = "flex homeTabs">
<router-link to = "/home/dynamic" class = "tab" tag = "div" active-class = "active">
<div>最新动态</div>
</router-link>
<router-link to = "/home/trade" class = "tab" tag = "div" active-class = "active">
<div>最优交易</div>
</router-link>
<router-link to = "/home/info" class = "tab" tag = "div" active-class = "active">
<div>资讯</div>
</router-link>
</div>
</template>
更多推荐
已为社区贡献33条内容
所有评论(0)