介绍

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: '/about ', query:{id:6}}"></router-link>

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

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

导航守卫

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

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

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

每个守卫方法接收参数：

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

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

  • next：可选，是一个方法

可以返回的值如下：

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

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

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