前言

vue是单页面应用，在一个单页面中进入子页面或者跳转到其他页面离不开路由的帮助，与vue相辅的路由插件是vue-router，如果让你手写vue-router配置项或者排查问题，这时候就需要扎实的基础，并且vue-router4.x都有了ts类型定义，学习vue-router肯定会有所收获。

路由

当我们接触开源项目时，vue-router已经与vue绑定了，基础路由也已经写好，看起来vue-router可有可无，但是如果我们把路由去掉，想要进入子页面就会变得很麻烦，比如我们有一个主页面跟一个子页面，没有路由该如何实现两个页面之间的跳转呢?一种简单的方式的是通过v-show或v-if根据变量去判断：

js 复制代码

   <div>
    <A v-show="pageNo === 1"></A>
    <B v-show="pageNo === 2"></B>
  </div>

假设A是父页面，B是子页面通过修改pageNo的值去显示不同的组件，这种方法很受限制，父子页面之间的传参也麻烦，特别是子页面一多，各种交互就会很麻烦，后续维护起来也很难受（我就做过类似的项目，刚接手的时候想'死'的心都有了）。而路由就让这个过程变得很简单，直接用this.$router.push想跳到哪个页面都行。除此之外还可以使用a标签，路由在页面也是显示为a标签，但是路由不会重新加载页面，就能直接更改url。有了对比才更加明显，路由方便了许多。

router-link

router-link是可以包裹链接的组件，跟a标签基本一样，并且它会在页面上渲染a标签。相比于a标签，router-link不会在路由修改时重新加载页面，因为它会守卫点击事件，而且跳转链接只需要写相对路径就行。我们翻下源码，可以找到router-link会render成a标签。

router-link的ts接口定义为RouterLinkProps，也就是router-link的接收参数：

to:跳转的路由链接，接收字符串或者路由对象，使用对象时候我们可以传参。

js 复制代码

    <router-link to="my-page"></router-link>
    <router-link to="{name:'my-page',params:{a:'1'}}"></router-link>

具体的ts类型为RouteLocationRaw。

replace:是否替换路由，接收布尔值，如果为false，那么点击跳转就会是router.replace。
activeClass:点击后的样式，类似于a标签点击后的伪类选择器。
exactActiveClass:点击后的样式，跟acitveClass不同，它是需要严格匹配路由才会触发。针对以上两个参数，我们可以简单写个demo，我们在/table页面中用router-link写下跳转路由。

js 复制代码

  <router-link to="/">first</router-link>
  <router-link to="/table">second</router-link>

此时页面两个路由就是初始样式，当我们设置activeClass时，会发现两个路由都受影响了。

js 复制代码

.router-link-active {
  border: 1px solid red;
}

当我们换成严格匹配时，链接到/table的才会受影响，我们此时在/table页面中。

js 复制代码

   .router-link-exact-active {
  border: 1px solid red;
}

ariaCurrentValue:aria-current的值，了解即可。
custom:是否使用自定义链接，设置为true时，配合着v-slot使用，通过v-slot获取参数，在自定义的链接中使用。

router-view

router-view：用来显示组件，在vue中一个路由会有着对应的vue文件，如果只使用router-link跳转路由，而没有使用router-view那么页面就会是空白的，router-view就像窗口将路由对应的组件展示出来啦。 router-view的参数很简单:

name:组件名称，渲染出名称对应的页面。
route:路由对象。
router-view是用来渲染视图的组件，外面可以包裹transition做动画过渡效果，也可以用keep-alive缓存组件。

总结

Vue Router极大地方便我们进行页面之间的跳转，让vue单页面应用使用起来更加方便，而router-link与router-veiw是跳转路由与展示页面的组件，这两个组件的含义是要牢记于心的。

Vue Router学习（一）—— 初识路由

前言

路由

router-link

router-view

总结