路由相关知识

一、$router和$route的区别

解释：

这两个是选项是api的写法（this.$router，this.$route)。

组合式对应的是（useRouter()和useRoute()的返回值）。

$router：

是一个项目中创建的路由对象，管理整个项目的路由（包括：路由模式，路由配置，路由跳转等等），包含有api：push()，go()，back()，addRoute()等等

$route：

当有路由跳转时，会产生该对象，该对象一般是匹配到的路由对象，特指某个路由对象（简单粗暴理解：路由配置中的某个路由配置对象，再加上属性：params，query，meta等等）

二、路由传参

1、路由传参是什么：

路由传参：路由跳转时，从原组件到目标组件的传值。

2、路由传参有什么：

两种方式：params和query

3、两种方式的区别：

1、传参和接参的代码格式

1、params：

需要在路由配置中进行动态路由配置：（路径/:参数）

(1）、传

1、字符串写法
​
<router-link to="/路径/值"></router-link>
​
2、对象写法
​
<router-link :to="{name:'路由的名字',params:{参数名：值}}"></router-link>

(2）、接：

//选项式
this.$route.params.参数名
​
//组合式
const route = useRoute();
route.params.参数名

2、query：

需要在路由配置中进行动态路由配置：（路径/:参数名）

1）、传：

1、字符串写法

<router-link to="/路径?参数名1=值1&参数名2=值2"></router-link>

2、对象写法

<router-link :to="{path:'路由的名字',query:{参数名1：值1,参数名2：值2}}"></router-link>

2）、接：

//选项式
this.$route.query.参数名
​
//组合式
const route = useRoute();
route.query.参数名

​

2、使用场景

(1）、多个参数：建议使用query，因为地址栏容易阅读，而且不需要写路由配置

(2）、单个参数：一般使用params

三、路由守卫

1、什么是路由守卫

控制组件的跳转，对是否能够进入某个路径对应组件做限制。根据业务逻辑来判定是否可以进入某个组件。

什么时候使用路由守卫：

当进入某个路径，会有限制时。就需要使用路由守卫。

当进入路径时，需要完成通用的业务，也可以使用路由守卫，特别是全局路由守卫

2、路由守卫有哪些分类

(1）、全局守卫

①前置钩子：beforeEach，当地址栏的路径发生变化时，会先调用该钩子函数，再进行进行路由匹配（路由匹配之前调用）。

②后置钩子：afterEach，当路由匹配成功后，先调用该函数，然后才创建组件（路由匹配成功之后）。

（2）、路由独享守卫

①只有前置：beforeEnter：当匹配到某个指定的路由后，会先调用该函数，然后再创建组件。

（3）、组件内部守卫

①前置：beforeRouteEnter：当路由匹配成功后，进入组件前，先调用该函数。

②路径更新，组件复用：beforeRouteUpdate： 当地址栏路径发生变化，但是进入的组件和上一个组件是同样的情况下，会调用先该函数。如：

③离开：beforeRouteLeave：当通过路由的方式离开某个组件前，会调用该函数。

3、路由钩子函数的参数：

to：想去哪个路由，to和$route是同样的对象

from：来自哪个路由对象，from和$route是同样的对象

next：下一步何去何从。

next(true)：默认就是true，表示继续前行

next(false)：不能前行

next(路径字符串或者对象)：跳转到指定的路径。