关于Vue-router史上最全详解

前言：vue-router是什么？为什么我们不像原来一样直接用 a 标签编写链接？如何使用？常见路由操作有哪些？

Vue Router是什么

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• 嵌套的路由/视图表
• 模块化的、基于组件的路由配置
• 路由参数、查询、通配符
• 基于 Vue.js 过渡系统的视图过渡效果
• 细粒度的导航控制
• 带有自动激活的 CSS class 的链接
• HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• 自定义的滚动条行为

注意： route指的是当前页面的所有路由信息， router是路由的方法。

router-link

<router-link to="xxx" tag=" ">
//  将原本用a标签跳转的功能用router-link实现
//  to是指要跳转到的目录，tag是这个点击跳转标签的样式，可以是li的样式等等

router-link-exact-active: 路由完全匹配，当前选中
router-link-active: 路由不完全匹配
to: 表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

<!-- 字符串 -->
<router-link to="home">Home</router-link>
<!-- 渲染结果 -->
<a href="home">Home</a>

<!-- 使用 v-bind 的 JS 表达式 -->
<router-link v-bind:to="'home'">Home</router-link>

<!-- 不写 v-bind 也可以，就像绑定别的属性一样 --&