vue路由技术

1.基本使用

1.安装vue-router，命令:npm i vue-router

2.应用插件:Vue.use(VueRouter)

3.编写router配置项

4.切换样式：active-class可以配置高亮

<router-link active-class="active" to="/about">About</router-link>

5.展示路由

<router-view></ router-view>

---

2.使用路由的注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

2.通过切换，“隐藏""了的路由组件，默认是被销毁掉的，需要的时候再去挂载。先销毁现在的组件，再挂载新的组件

3.每个组件都有自己的 $route属性，里面存储着自己的路由信息。

4.整个应用只有一个router，可以通过组件的 $router属性获取到。

---

3.嵌套路由

1.配置路由规则,使用children配置项:

2.跳转要写完整路径

<router-link to=" /home/news " >News</router-link>

---

4.带参路由query

1.传递参数

第一个红框为什么这么写？首先前面冒号（：）是代表吧后面当做当做js表达式的模板字符串，然后${}解析这个里面的东西

2.接收参数:

$route.query.id 
$route.query.title

---

5.命名路由

在跳转的时候简化

1.第一步给路由命名为hello

2.简化写法：

---

6.带参路由：params

和上面query相比，我们需要修改的地方

第一处：路由的地方

注意点：我们使用params参数传递数据的时候，必须使用name，而不能使用path来代表路径

第二处：声明路由的时候一定要占位

第三处：接收参数的地方

$route.params.id
$route.params.title

---

6. 路由props配置

作用：让路由接受参数的时候不写纳闷多

谁接受东西就把props写在哪里

配置路由：

注意点：第二种写法只能在params传参方式中使用！！

接收props

我们在路由中配置了props我们就需要在组建中用props接收

---

7.router-link的replace属性

push不会产生替换，就一直往里面存，replace会直接替换当前的记录，默认是push！

---

8.编程式路由导航

不借助rooter-linke标签的路由导航，因为rooter-linke最终会转化为a标签，但是我们可能用按钮标签等等

1.给button按钮加上路由：

这里m是上面的参数！

2.总结push和replace两种写法：

3.三种前进后退的方法

---

9.缓存路由组件

作用：让切换组件的时候不被销毁

一定要写include，不然里面所有的组件都不会销毁！include可以指定被销毁的东西

如果是多个的写法：写成数组

---

10.router特有的生命周期钩子activated，deactivated

1.作用:路由组件所独有的两个钩子，用于捕获路由组件的激活状态。

2.具体名字:

1. activated路由组件被激活时触发。
2. deactivated路由组件失活时触发。

---

11.全局前置路由守卫

要使用路由守卫必须这么写，不能直接暴露，直接暴露就会失效

beforeEach()调用时机：
1.初始化的时候被调用
2.每次路由切换前被调用
注意：所有的路由在切换的时候都需要走！！！

接收的三个参数（to，from，next）

to是要去的地方，from是来自哪里，next是放行

第一个红框判断是不是我们要去的地方，如果是我们就看条件满不满足，如果不满足我们就输出条件不满足，如果满足我们就next（）放行

问题

如果我们要写十多个判断怎么办？？那么我们怎么做？？

meta：路由元信息，程序员自定义的信息，谁需要权限的校验我们就放在哪里

路由守卫里面也需要修改：

---

12.后置守卫

全局后置守卫:初始化时执行、每次路由切换后执行
例子：修改网页的title

---

13.独享路由守卫

独享路由守卫只有前置没有后置！！！

指定的路由在切换的时候需要走！！！

配置在该路径下面

---

14.组件内路由守卫

注意点：在beforeRouterLeave一定要使用next()来放行

---

15.几个守卫的执行顺序

---