vue-router从入门到精通（二）

最新推荐文章于 2024-08-04 12:47:40 发布

原创最新推荐文章于 2024-08-04 12:47:40 发布 · 351 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router #vue

vue-router 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了 Vue.js 中 <router-link> 组件的使用方法，包括如何通过 'to' 属性设置链接，如何自定义激活状态的样式类，以及如何绑定动态路径等高级用法。

上一期，我们讲过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'
  }