我报名参加金石方案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种调用办法终究的成果
\
\
多个途径需求设置权限时,可运用数组存储
