1.vue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换。
2.动态路由是指路由器能够自动地建立自己的路由表,并且能够根据实际情况的变化适时地进行调整。
3.嵌套路由又称为子路由,在实际应用中,通常由多层嵌套的组件组合而成。URL中各段动态路由也按某种结构对应嵌套的各层组件。
4.路由跳转的不同方式:
方式1.router-link
方式2.this.$router.push() (函数里面调用)
方法3. this.$router.replace() (用法同push)
方法4.this.router.go(n)以及this.router.back()
5.路由跳转传参方式:
● params参数:属于路径中的一部分,配置路由的时候需要占位
● query参数:不属于路径中的一部分,不需要占位
注意:query 要用 path 来引入,params 要用 name 来引入
接收参数时,分别是 this.route.params.name
6.导航守卫:导航守卫主要用来通过跳转或取消的方式守卫导航,包括全局守卫、全局解析守卫、后置守卫、路由独享守卫、组件内守卫
1.全局前置守卫
当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。
① 执行时间
初始化时执行,每次路由切换前执行
② 使用场景
全局前置守卫通常用来进行路由跳转的一些信息判断,判断是否登录,是否拿到对应的路由权限等等。
2.全局后置守卫:
● 当一个导航触发时,全局后置钩子(在进入组件之后)调用。
● vue-router 提供的 router.afterEach((to, from) => {})实现全局后置守卫
● to:即将要进入的目标 路由对象
● from: 当前导航正要离开的路由
① 执行时间
初始化时执行,每次路由切换后执行
② 使用场景
对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。
3.路由独享守卫:
● 与全局前置守卫相比路由独享守卫只是对当前路由进行单一控制参数和全局前置守卫相同
● 在路由配置上直接定义 beforeEnter 进行路由独享守卫定义
独享守卫 只在进入路由时触发,不会在 params、query 或 hash 改变时触发。它们只有在 从一个不同的 路由导航时,才会被触发。
4.组件内守卫详解
组件内直接定义路由导航守卫
组件内守卫又分为进入守卫和离开守卫