上一期,我们讲过vue-router的基本使用,这一期,我们讲一下<router-link>标签的使用以及配置
<template>
<div id="app">
<ul>
<router-link to="/home" tag="li">home</router-link>
<router-link to="/document" tag="li">document</router-link>
<router-link to="/about" tag="li">about</router-link>
</ul>
<router-view class="center"></router-view>
</div>
</template>
我们使用<router-link>组件来导航,其中‘to’指定属性链接,<router-link>默认会被渲染成一个`<a>`标签,当然,我们也可以定义自己想要的渲染之后的标签,可以使用tag来设置,如我这里使用tag="li"
当然,你也可以改成div、p等等
当导航为选中状态时,<router-link>自动生成了一个link-router-active类,我们可以给这个class添加样式,让选中后有一些效果。
我们也可以自定义一个选中class,如上图代码中,我自定义了一个is-active类,这是在router实例化的时候配置的
let router = new VueRouter({
linkActiveClass: 'is-active',
routes: [{
path: '/home',
component: home
}
上述这种自定义选中类是改变了所有的选中类,如果我们有其他的需求,如单独给某个标签选中时另外的样式,我们可以在<router-link>中单独设置
<router-link to="/document" tag="li" active-class="activeClass">document</router-link>
这样的话,当我们选中document的时候,选中样式会根据activeClass来渲染
<router-link>中也可以将路径动态绑定,v-bind就能够满足我们的需求了
<router-link :to="message" tag="li" active-class="activeClass">document</router-link>
export default {
data () {
return {
message: '/document'
}
}
}
结果如下图所示
<router-link>预留的有一个事件属性,我们可以用来修改触发方式,如:给router-link中添加event="mouseover"属性后,我们跳转该路由时,不需要再点击了,鼠标移入即可
<router-link to="/haha" tag="li" event="mouseover">haha</router-link>
<router-link to="/home/123" tag="li" event="mouseover">home123</router-link>
最后,需要说明的是,如果我们没有匹配到某个路由,显示内容就会为空,这样显然不够友好。我们可以这样去做,在路由中设置通配符,对应的为404页面
{
path: '*',
component: noFound
}
也可以使用重定向的方式,重定向我们后面会说到
{
path: '*',
redirect: '/document'
}