Vue 爬坑之旅 | 您所在的位置:网站首页 › vue二级路由默认页面 › Vue 爬坑之旅 |
在实际开发中,嵌套路由经常会用到,基本用法也很简单,今天要说的不是嵌套路由怎么用,而是在用的过程中发现的二点小细节的处理。 嵌套路由中默认选中第一个子路由在一个这样的界面中,底部的五个 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 属性,问题即可解决。 最新动态 最优交易 资讯 |
CopyRight 2018-2019 实验室设备网 版权所有 |