vue-router是Vue.js官方的路由插件，目前最新版本是3.0.1，用于单页面应用中的导航。vue只注于视图层，可是一个完整的单页应用离不开路由功能，vue-route就是专门用于处理路由的。
1.安装
如果你是通过 vue-cli 创建的应用，应该就已经默认集成了 vue-router ，可以检查 package.json文件，如图：
image.png
如果不是通过 vue-cli 创建的应用，可以使用 npm 包管理器安装
npm install vue-router -S
在 上个vue-complex 应用中，在src目录下有一个 router 文件夹，该文件下有一个 index.js 文件，里面定义的就是应用的路由信息，在大型的应用中，路由其实很复杂，这是为了对路由统一管理。在 vue 应用中使用路由，需要添加以下内容
import Router from 'vue-router';
Vue.use(Router);
目前router目录下的index.js内容如下：
image.png
2.使用
从上图中其实已经可以简单看到vue-router的使用，在使用vue-router之前，需要先引入 vue-router，然后把它当作一个插件添加到vue中。使用起来也很简单，vue-router提供了两个常用的组件，<router-link to="..."> 和<router-view> 。
<router link to="...">组件 支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a>标签（可以通过配置 tag 属性生成别的标签）。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名。其中带 to 属性的值 ，其实就是router 的name 值。
<router-view>负责渲染路径匹配到的组件，比如在上图的index.js文件中， path: '/'，代表的就是 跟路径，其实就是应用默认开始的路径；component 对应的是组件，表示 在地址栏输入 / 时 将渲染 HelloWorld 组件的内容。该内容将被渲染到 App.vue 中的<router-view />组件中。App.vue 内容如下：
image.png
main.js文件内容如下：
image.png
3.动态路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用『动态路径参数』（dynamic segment）来达到这个效果：
动态路由其实就是给路由路径动态设置参数。比如说一个个人中心界面，一般情况下，该界面的模块都是固定的，不同的用户看到的界面又各不相同，那是因为每个用户在后台存储的用户信息不一样，而前端界面，只是根据后台数据渲染界面，所以可以看到不同的效果。这种情况下就需要用到动态路由，在开发阶段，只会开发一个界面，也就是说只会有一个大组件，这个组件对应路由中的一个路径，而不同用户跳转的这个界面的时候只需要带上一个用户ID就可以获取到用户信息。例如：
image.png
现在 像 /user/foo 和 /user/bar 都将映射到相同的路由
4.嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件，例如：
image.png
借助 vue-router，使用嵌套路由配置，就可以很简单地表达这种关系。
image.png
这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 ：
image.png
要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
image.png
访问的时候把路径拼起来就好了
5.编程式的导航
路由之间的转跳，也可以不实先声明，而是在用到的时候在 js 中调用接口实现跳转，这就是编程式路由。
router.push(location, onComplete?, onAbort?)
注意：在 Vue 实例内部，你可以通过router访问路由实例。因此你可以调用this.router.push
想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。
image.png
该方法的参数可以是一个字符串路径，或者一个描述地址的对象
image.png
注意：如果提供了path，params会被忽略，上述例子中的query并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的name或手写完整的带有参数的path：(同样的规则也适用于router-link组件的to属性。)
image.png
router.replace(location, onComplete?, onAbort?)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。
image.png
router.go(n)
这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)。
例子：
image.png
网友评论