Vue Router学习组合式API

零 Vue.js教程评论98字数 1755阅读5分51秒阅读模式

Vue Router学习组合式API

前言

为了更好地适配vue3,vue rouer4.x版本也引入了组合式API的写法,前面我们也简单用了下,本节我们系统讲解一下vue router的组合式API。

路由相关

在vue2中我们想要获取路由相关信息或者进行路由导航,可以通过访问实例this:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

js

代码解读
复制代码
// 路由信息 名称等
this.$route
// 路由跳转
this.$router 

而vue3中setup不能访问this,这时候就需要用新的API——useRouteruseRoute,这两个用法也很简单:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

js

代码解读
复制代码
//路由相关跳转
const router = useRouter()
//路由信息
const route = useRoute()

useRoute的源码我们在讲解路由对象的时候提到过,这里我们简单回顾下。打开vue router源码找到useApi:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

image.png
核心思路就是通过provide与inject,在实例化的时候将route与router信息收集,再通过inject拿到,整个逻辑还是很简单的。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

导航守卫

前两节我们刚讲解过导航守卫,其中光组件导航守卫有三个,而在组合式API中只有两个相关的API:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

  • onBeforeRouteLeave:路由离开时触发的守卫,效果、用法与beforeRouteLeave类似,并且不能访问this

js

代码解读
复制代码
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from) => { 
})

-onBeforeRouteUpdate:路由更新时触发的守卫,跟beforeRouteUpdate类似。文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

js

代码解读
复制代码
import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate((to, from) => { 
})

注意导航相关的组合式API只要是由<router-view>渲染的组件都能够生效,要比组件导航适用范围大:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

js

代码解读
复制代码
<router-view></router-view>

import { onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteUpdate((to, from) => { 
//此时router-view相关组件都能打印出来
console.log(to)
})

接下来我们来解析下源码,上节我们解析了全局路由守卫的源码,具体的实现过程就是收集、执行,其中守卫的执行就是通过Promise链式调用按照顺序去判断执行,我们重点放到收集就行。首先我们来看下onBeforeRouteLeave:文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

QQ图片20240710224722.png文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

  • onBeforeRouteLeave需要先引入才能使用,不满足条件直接return并给出警告。
  • 通过inject获取路由相关的信息,key值为matchedRouteKey,provide的地方在RouterView,这也解释了组合式API广泛的适用性。

QQ图片20240710225613.png文章源自灵鲨社区-https://www.0s52.com/bcjc/vue-jsjc/17103.html

  • 接着判断activeRecord,不满足给出警告,这些警告信息也能够帮我们梳理思路,理解源码。
  • 最后通过registerGuard收集守卫,这是组合式API中的核心方法,第二个参数很明显时为了适配update。

QQ图片20240710230142.png
该方法思路很清晰,通过生命周期进行导航守卫的增删,也就是我们所说的收集,接下来就是执行,我们搜索leaveGuards关键词就能找到对应的源码。 QQ图片20240711232235.png
在router时添加到guards,通过链式调用进行执行。

RouterLink

RouterLink是创建路由导航的一个组件,如果我们想要在函数中自定义链接就需要用到useLink,它能够接收与RouterLink类似的props对象,我们就是用这些属性来自定义链接。

js

代码解读
复制代码
//点击跳转login
<a :href="href">

import { useLink } from 'vue-router'
import { ref } from 'vue'
const to = ref({ paht: '/login' })
const { href } = useLink(to);

useLink日常开发中用的就比较少了,源码相关我们就不再展开赘述。

总结

组合式API就是针对setup引入的几个API,我们要熟悉相关写法才能在setup写出正确的逻辑。

零
  • 转载请务必保留本文链接:https://www.0s52.com/bcjc/vue-jsjc/17103.html
    本社区资源仅供用于学习和交流,请勿用于商业用途
    未经允许不得进行转载/复制/分享

发表评论