介绍

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的 核心深度集成，包含的功能有：

• 嵌套的路由/视图表

• 模块化的、基于组件的路由配置

• 路由参数、查询、通配符

• 基于Vue.js 过渡系统的视图过渡效果

• 细粒度的导航控制

使用

在用脚手架创建项目时已经选择安装上了，如果刚开始没有，通过npm安装：

npm install vue-router@4

安装完后会有router目录：

使用流程：

1. 开发页面（组件）

2. 定义路由

3. 组件使用路由

路由传参

URL传参：一般用于页面跳转，将当前数据传递到新页面，例如详情页

params传参

- 配置路由：{path: '/user/:id', component: about}

- 传递方式：<router-link to="/user/6/"></router-link>

- 传递后路径：/user/6

- 接收参数：$route.params.id

query传参

- 配置路由：{path: '/user/', component: about}

- 传递方式：<router-link to="{path: '/user ', query:{id:6}}"></router-link>

- 传递后路径：/user?id=6

- 接收参数：$route.query.id

导航守卫

正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。 简单来说，就是在路由跳转时候的一些钩子，当从一个页面跳转到另一个页面时， 可以在跳转前、中、后做一些事情。

你可以使用router.beforeEach 注册一个全局前置守卫：

当一个导航触发时，就会异步执行这个回调函数。

每个守卫方法接收参数：

• to：即将要进入的目标，是一个路由对象

• from：当前导航正要离开的路由，也是一个路由对象

• next：可选，是一个方法

可以返回的值如下：

• false：取消当前的导航。如果浏览器的URL 改变了(可能 是用户手动或者浏览器后退按钮)，那么URL 地址会重置 到from 路由对应的地址。

• 一个路由地址：通过一个路由地址跳转到一个不同的地址。

在网站开发中，使用导航守卫一个普遍需求：登录验证，即在没 有登录的情况下，访问任何页面都跳转到登录页面。