我报名参加金石计划1期挑战——瓜分10万奖池,这是我的第1篇文章,点击查看活动详情
1.前端路由的概念与原理
路由(router):对应关系
SPA(单页面应用程序)与前端路由
前端路由:hash地址与组件之间的对应关系
前端路由的工作方式
- 用户点击了页面上的路由链接
- 导致了url地址栏中的Hash值发生了变化
- 前端路由监听了到Hash地址的变化
- 前端路由把当前Hash地址对应的组件渲染的浏览器中
2. vue-router的基本使用
- 安装vue-router包
npm i vue-router -s
- 创建路由模块
在src源代码目录下,新建rount/index.js路由模块,并初始化如下代码:
- 导入并挂载路由模块
- 声明路由链接和占位符
app
3. vue-rount的常见用法
1. 嵌套路由:通过children属性声明子路由规则
2. 动态路由匹配:
动态路由指的是:把Hash地址中可变的部分定义为参数项,从而提高路由规则的复用性。 在vue-router中使用英文的冒号(:)来定义路由的参数项。示例代码如下:
以上路由如何取得id值?
3. 声明式导航&编程式导航
在浏览器中,点击链接实现导航的方式,叫做声明式导航。例如:
- 普通网页中点击链接、vue项目中点击都属于声明式导航
在浏览器中,调用API方法实现导航的方式,叫做编程式导航。例如:
- 普通网页中调用location.href跳转到新页面的方式,属于编程式导航
\
Vue-router提供了许多编程式导航的API,其中最常用的导航API分别是:
- this.$router.push('hash地址') 跳转到指定的hash地址,并增加一条历史记录
- this.$router.replace('hash地址') 跳转到指定的hash地址,并替换掉当前的历史记录
- this.$router.go(数值n)
调用go方法,可以在浏览器历史中前进和后退.
4. 导航守卫
导航守卫可以控制路由的访问权限。示意图如下:
全局前置守卫:
每次发生路由的导航跳转时,都会触发全局前置守卫。因此,在全局前置守卫中,程序员可以对每个路由进行访问权限的控制:
全局前置守卫的回调函数中接收3个形参,格式为:
next函数的3种调用方式
参考示意图,分析next函数的3种调用方式最终的结果
\
\
多个路径需要设置权限时,可使用数组存储