Vue-Router基础（二）：base，linkActiveClass，linkExactActiveClass，scrollBehavior，parseQuery，stringifyQuery

base：

那么 base 有什么用呢？我们来试一下：

我们重新跳转后发现，它默认跳转的路由变成了 '/base/hello'，这就是 base 的功能。

它在我们 routes 里面配置的所有 path 前面，都会给它加上一个 /base/。这段路径，它作为我们整个应用的基路径。

意思就是我们所有的路径，都要在这个基础之上。然后你在应用里面，使用 router 对象去跳转还是使用 router-link 去跳转，只要你通过的是 vue-router 的 API 进行的跳转，那么它都会给你自动加上这个 /base/。

但是，还有一个很神奇的情况，那就是我们把 /base 去掉，然后按回车，发现我们这个应用还是能够显示出来：

我们发现都是可以显示出来的。所以说，base 它不是一个强制性的，但是设置了这个参数之后，你用 vue-router 里面所有的 API 去进行的跳转，它都会给你加上这个 base。

这在某些情况里面，你可能会有一些用处。比如说你要去区分一些页面路径和其他类型路径的时候，但不是特别的常用，所以你可以先了解下这个情况，然后再你后面要用到这个东西，那么你可以去使用。

这里稍微注意下，我们加 base 的时候，前后的 / 都要给它加上。

 

linkActiveClass 和 linkExactActiveClass：

我们首先给 App.vue 加2个 router-link 标签。

我们可以看到页面上多了2个按钮，router-link 其实本身的实现就是一个 a 标签。

我们可以通过点击，去到对应的路由。

我们可以看到，当我们点击 login 时，它多了2个 class。这就是我们要去配置的内容。

我们可以看到，login 里面的 class 名称就变成了，我们在 index.js 里面去配置的自定义 class 名称。

那么这个有什么用呢？

这就是我们给全局去写一些样式的时候，你会去用到的一些东西。

首先，我们在页面上可点击的，使用 vue-router 的路由，我们一般都会使用 router-link 去做，这是为什么呢？

因为我们使用的 router-link，它里面是 a 标签。然后 a 标签的 href，它是会去帮我们有利于整个网站做 SEO 的。

但是 a 标签它默认的行为是页面跳转，它不会是我们前端的路由跳转。所以这个 router-link 里面，它其实是给这个 a 标签加了事件的。

当我们点击这个 a 标签的时候，它才根据这个 href 使用的是 vue-router 的 API 去进行前端路由的跳转。所以这就是 router-link 帮我们去做的事情。

然后它提供给我们 linkActiveClass 和 linkExactActiveClass 这些配置项之后，我们就可以在全局去写一些 class，来指定链接被激活的时候，应该显示一个什么样的样式。

 

那么 linkActiveClass 和 linkExactActiveClass 有什么区别呢？

我们先在 routes.js 里面添加一个路由，同时 App.vue 文件也添加一个 router-link：

然后我们先点击 login：

我们发现 login 有2个 class：aaa-active-link 和 bbb-exact-active-link。

然后我们再点击 login exact：

我们发现，上面的 login 少了一个 bbb 的 class，但是它还有一个 aaa 的 class。而下面的 /login/exact 则是两个都有了。

这是什么意思呢？因为 vue-router 它认为，如果你的路径，比如说 /login 和我们现在处于的路径 /login/exact。

也就是说，现在的 /login/exact 才是真正匹配我们现在处于的路径，那么我们的 bbb-exact-active-link 就是在它真正匹配，也就是完全匹配，一模一样的情况下，它才会加上这个 class。

而我们的 /login 其实是在，现在路径的一部分。就是它只有一部分是重合的，/login 是 /login/exact 的子集。

像这种情况下，它只会加上 aaa-active-link，但是它没有 bbb-exact-active-link。所以这就是它们两个的区别。

结论：linkActiveClass 是部分匹配当前处于的路由，linkExactActiveClass 则是完全匹配。

上面就是2个 class 的区别，大家要记住有这么一个属性，因为很多地方都可以用到，并且还非常的好用。

 

scrollBehavior

scrollBehavior 是什么东西呢？其实就是我们在页面路径进行跳转的时候，这个页面要不要做一些滚动的问题。

scrollBehavior 它是一个方法，有三个参数：

to：路由跳转的过程当中，我们要去到的那个路由

from：我们是从哪个路由跳转的

savedPosition：保存过的一个路径

比如说 /login 跳转到 /hello：

那么我们的 to 就是 /hello，我们这边的 from 就是 /login。

那么 savedPosition 是什么呢？如果我们之前有进入到这个路由过，然后它就会自动保存这个路由滚动条的一个位置，savedPosition 它会记录这个位置。

当然它们拿到的不是一个字符串，而是一个完整的 route 对象，就是我们的路由对象。

它会包含一些路由的信息，它的 param，query 这些东西，它都会包含在里面。

然后我们自己可以根据 to，from，savedPosition 去自定义我们页面的一些滚动行为。

一般来说，我们都会这么做：

意思就是说，比如我们在 /hello 这个路由下面，如果我们有产生一些滚动的行为，比如说滚动到页面下面去了，那么我们下次在回到 /hello 的时候，它还是会处在这个位置。

如果我们没有保存过一个位置，那么它就直接把页面滚动到最上面以及最左边。

scrollBehavior 就是一个不同路径跳转的一个滚动行为。我们可以根据自己的需求去定义。

 

parseQuery 和 stringifyQuery：

这两个东西的作用相信大家看到名字就已经猜到了，就是我们 url 后面的问号跟上的东西，比如：localhost:8080/hello?a=xxx&b=123。

问号后面的 a=xxx&b=123，这个就叫做 query。那么 query 这个东西，它是作为我们进来这个页面时候的一个参数。我们页面里面要显示哪些内容，可能会跟我们 query 的内容有关系，比如说我们做一些搜索时候的参数。

然后我们拿到的这部分 query： a=xxx&b=123，它肯定是个字符串，然后把它转成一个 JSON 的对象。

vue 里面它是会默认给我们去转的，当然如果你有一些要定制的需求，你觉得它转的方式不对，或者其他之类的，你可以去指定这些方法。

parseQuery 就是把字符串转换成 JSON 对象的方法。它的参数 query 是一个字符串。

相反的，stringifyQuery 就是把 JSON 对象转成一个字符串的过程，它的参数是一个 JSON 对象。

你可以根据自己的需求去定制这两个函数，然后返回你自己想要的结果就行了，我们这里就不详细的去讲解了，因为一般也用不到。