Vue学习Day06

1. 路由

是什么：对应关系（Hash地址与组件之间的对应关系）

2. SPA与前端路由

3.前端路由的工作方式

（1）用户点击页面上的路由链接

（2）导致URL地址栏中的Hash值发生变化

（3）前端路由监听到了Hash地址的变化

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

结论：前端路由，指的是Hash地址与组件之间的对应关系！ 

vue-router的基本用法

1.什么时vue-router

vue-router时vue.js官方给出的路由解决方法。它只能结合vue项目进行使用，能够轻松管理SPA项目中的组件切换

官方文档地址：https://router.vuejs.org/zh/

（1）安装vue-router包

输入命令：npm i [email protected] -S

（2）创建路由模块 

在src根路径下新建router文件夹在里面新建index.js文件作为我们的路由模块

在index.js文件中进行以下配置

（3）导入并挂载路由模块

（4）声明路由链接和占位符

在路由模块中进行声明 

当安装和配置了vue-router后，就可以使用router-link来代替a链接了

路由重定向：

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

嵌套路由：

通过路由实现组件的嵌套展示，叫做嵌套路由

通过children声明子路由规则

默认子路由

如果children数组中，某个路由规则的path值为空字符串，则这条路由规则叫做默认子路由

动态路由匹配 ：把Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性

在vue-router中使用引文的冒号来定义路由的参数

可以为路由规则开启props传参，从而方便的拿到动态参数的值

声明式导航&编程式导航跳转

在浏览中，点击链接实现导航的方式，叫做声明式导航。例如：

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

在浏览器中，条用API方法实现导航的方式，叫做编程式导航。例如：

普通网页中调用location.href跳转到新页面的方式，属于编程式导航

vue-router中的编程式导航API

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

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

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

（2）this.$router.replace('hash地址')

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

（3）this.$router.go（数值 n）

可以在浏览历史中前进和后退

$router.go简化写法 

（1） $router.back()    在历史记录中，后退到上一个页面

（2） $router.forward()    在历史纪录中，前进到下一个页面

导航守卫：可以控制路由的访问权限

全局前置守卫

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

守卫方法的三个全参

to：to是将要访问的路由的信息对象

from：from是将要离开的路由的信息对象

next：next是一个函数，调用next()表示放行，允许这次路由导航

next函数的3种调用方式

（1）当前用户拥有后台主页的访问权限，直接放行：next()

（2）当前用户没有后台主页的访问权限，强制其跳转到登入页面：next('login')

（3）当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)