前端路由的工作方式
用户点击了页面上的路由链接
导致了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
属性,自定义路由链接被激活时所应用的类名