22、Vue-router路由

---

1、什么是Vue-router

路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质 就是建立起url和页面之间的映射关系。

2、安装与使用

2.1、安装 vue-router

npm install vue-router --save

2.2、使用vue-router

①、导入路由对象，并且调用 Vue.use(VueRouter)

import Vue from 'vue' 
import VueRouter from 'vue-router' 
Vue.use(VueRouter)

当我们输出Vue.prototype时，如果对象中有上面箭头指的两个文件，说明已经安装成功了。
②、创建路由实例，并且传入路由映射配置
③、在Vue实例中挂载创建的路由实例


④、使用路由：通过<router-view>和</router-view>


这里我们就成功使用vue-router了。

3、router-link

是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。
相关属性
①、to：表示目标路由的链接。 当被点击后，内部会立刻把 to 的值传到 router.push(),所以这个值可以是一个字符串或者是描述目标位置的对象。

②、replace：设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。

③、append:设置 append 属性后，则在当前 (相对) 路径前添加其路径。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了,则为 /a/b

④、tag:有时候想要 <router-link> 渲染成某种标签，例如 <li>。于是我们使用 tag prop 类指定何种标签，同样它还是会监听点击,触发导航。

⑤、active-class：设置 链接激活时使用的 CSS 类名。可以通过以下代码来替代。

注意这里 class 使用 active-class="_active"。
⑥、exact-active-class:配置当链接被精确匹配的时候应该激活的 class。可以通过以下代码来替代。

⑦、event:声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组。

上代码设置了 event 为 mouseover ，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。
举例：

4、改变路由模式

路由模式：
hash:历史模式，不会制造页面刷新
history: 不会制造页面刷新，且没有不会有历史
默认情况下, 路径的改变使用的URL的hash.
如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可: