router-link的属性,使用
router-link的属性有:
to /replace\append\tag\active-class\exact\exact-active-class\event
1.to(string)----------------必填属性,跳转路径
2.replace(true/false)
利用 replace ,当点击时,会调用 router.replace() 而不是 router.push(),于是导航后不会留下 history 记录。
<router-link :to="{ path: '/abc'}" replace></router-link>
3.append(true/false)
设置 append 属性后,则在当前 (相对) 路径前添加基路径。例如,我们从 /a 导航到一个相对路径 b,如果没有配置 append,则路径为 /b,如果配了,则为 /a/b
4.tag(string)
有时候想要 <router-link>
渲染成某种标签,例如 <li>
于是我们使用 tag prop 类指定何种标签,同样它还是会监听点击,触发导航。
5.active-class(string)
设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。
<router-link to="/productService" active-class="active">产品服务</router-link>
全局配置:
const createRouter = () => new Router({
mode: 'history', // require service support
linkActiveClass:'is-active',
scrollBehavior: () => ({ y: 0 }),
routes: constantRoutes
})
6.exact(true/false)
“是否激活”默认类名的依据是包含匹配。 举个例子,如果当前的路径是 /a 开头的,那么 也会被设置 CSS 类名。
按照这个规则,每个路由都会激活 <router-link to="/">!
一般项目首页都是path:‘/’,这样就是点击别的页面首页也会高亮,想要链接使用“精确匹配模式”,则使用 exact 属性:一般会配合*exact-active-class
*使用
<span >
<router-link to="/" exact-active-class="activeIndex" :exact="true">首页</router-link>
</span>
<span >
<router-link to="/productService" active-class="active">产品服务</router-link>
</span>
<span >
<router-link to="/industryConsulting" active-class="active">行业资讯</router-link>
</span>
<span >
<router-link to="/aboutUs" active-class="active">关于我们</router-link>
</span>
7.exact-active-class
配置当链接被精确匹配的时候应该激活的 class。注意默认值也是可以通过路由构造函数选项 linkExactActiveClass 进行全局配置的。
参考文章:VUE API