我报名参加金石方案1期应战——分割10万奖池，这是我的第1篇文章，点击检查活动详情

1.前端路由的概念与原理

路由(router)：对应关系

SPA（单页面应用程序）与前端路由

前端路由：hash地址与组件之间的对应关系

前端路由的工作办法

1. 用户点击了页面上的路由链接

2. 导致了url地址栏中的Hash值发生了改变

3. 前端路由监听了到Hash地址的改变

4. 前端路由把当时Hash地址对应的组件渲染的浏览器中

2. vue-router的基本运用

1. 安装vue-router包

npm i vue-router -s

2. 创立路由模块

在src源代码目录下,新建rount/index.js路由模块,并初始化如下代码:

3. 导入并挂载路由模块

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

app

3. vue-rount的常见用法

1. 嵌套路由:通过children属性声明子路由规矩

2. 动态路由匹配:

动态路由指的是：把Hash地址中可变的部分定义为参数项，从而进步路由规矩的复用性。 在vue-router中运用英文的冒号(：)来定义路由的参数项。示例代码如下：

以上路由如何获得id值?

3. 声明式导航&编程式导航

在浏览器中，点击链接完成导航的办法，叫做声明式导航。例如：

• 普通网页中点击链接、vue项目中点击都归于声明式导航

在浏览器中，调用API办法完成导航的办法，叫做编程式导航。例如：

• 普通网页中调用location.href跳转到新页面的办法，归于编程式导航

\

Vue-router供给了许多编程式导航的API,其中最常用的导航API分别是：

1. this.$router.push(‘hash地址’) 跳转到指定的hash地址,并添加一条前史记录

2. this.$router.replace(‘hash地址’) 跳转到指定的hash地址,并替换掉当时的前史记录

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

调用go办法,可以在浏览器前史中前进和撤退.

4. 导航护卫

导航护卫可以操控路由的访问权限。示意图如下：

大局前置护卫:

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

大局前置护卫的回调函数中接收3个形参，格式为：

next函数的3种调用办法

参考示意图,分析next函数的3种调用办法终究的成果

\

\

多个途径需求设置权限时,可运用数组存储