vue的路由

前端路由的工作方式

用户点击了页面上的路由链接
导致了URL地址栏的Hash值发生了变化
前端路由监听到Hash地址的变化
前端路由把当前Hash地址对应的组件渲染到浏览器中

vue-router的基本用法

1、在项目中，安装vue-router

npm i vue-router@版本号

2、创建路由模块

在src源代码目录下，新建router/index.js路由模块，并初始化

3、导入并挂载路由模块

在mian.js入口文件导入挂载路由

4、声明路由链接和占位符

在App.vue组件中，使用 vue-router 提供的 <router-link> 和 <router-view> 声明路由链接和占位符

5、在router的index.js路由模块中声明路由的匹配规则

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。
通过路由规则的 redirect属性，指定一个新的路由地址，可以很方便地设置路由的重定向

嵌套路由

通过路由实现组件的嵌套展示，叫做嵌套路由
① 声明子路由链接和子路由占位符

② 通过 children 属性声明子路由规则

动态路由

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。 在 vue-router 中使用英文的冒号（:）来定义路由的参数项

#router.params 参数对象

在动态路由渲染出来的组件中，可以使用 this.$route.params 对象访问到动态匹配的参数值

使用 props 接收路由参数

为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参

vue-router 中的编程式导航 API

vue-router 提供了许多编程式导航的 API，其中最常用的导航 API 分别是：

① this.$router.push('hash 地址')

跳转到指定 hash 地址，并增加一条历史记录

② this.$router.replace('hash 地址')

跳转到指定的 hash 地址，并替换掉当前的历史记录

③ this.$router.go(数值 n)

实现导航历史前进、后退

$router.go 的简化用法

在实际开发中，一般只会前进和后退一层页面。因此 vue-router 提供了如下两个便捷方法：

① $router.back()

在历史记录中，后退到上一个页面

② $router.forward()

在历史记录中，前进到下一个页面

导航守卫

全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制

守卫方法的 3 个形参

to：将要访问路由的信息对象
from：将要离开路由的信息对象
next：是一个函数，调用 next() 函数表示放行

常见用法

控制后台主页的访问权限
① 当前用户拥有后台主页的访问权限，直接放行：next()
② 当前用户没有后台主页的访问权限，强制其跳转到登录页面：next(’/login’)
③ 当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)

router的高级用法

默认的高亮class类

被激活的路由链接，默认会应用一个叫做router-link-active的类名，开发者可以使用此类名选择器，为激活的路由链接设置高亮的样式

自定义路由高亮的class类

在创建路由的实例对象时，开发者可以基于 linkActiveClass属性，自定义路由链接被激活时所应用的类名