Vue3 如何在 <script setup> 语法糖中使用 beforeRouteEnter

发表于 更新于

Vue 3 的官方路由版本为 Vue Router 4.x , 所以本文基于 Vue 3 + Vue Router 4.x , 请注意项目依赖版本。
如果你在项目里把所有大大小小的业务逻辑在全局路由守卫 if...else 一把梭那么本文也许不适合你。

可以定义 beforeRouteEnter 的地方有很多，不同的地方有不同的用途，今天在敲 Vue 3 项目时遇到一个页面需要单独处理的逻辑，但我使用的是 <script setup> 语法糖，因为在 setup 周期中路由解析完成，组件已创建，所以只有 onBeforeRouteLeave 和 onBeforeRouteUpdate 两个导航守卫可以使用。可以在下方相关链接查看文档。

要在路由解析前处理逻辑，难道只有放弃 <script setup> 的多个优势使用 export default ... 吗？当然不是~

Vue 官方和社区的大牛们必然已经遇到过这个情况和需求，经过搜索得到了目前的一种解决方案，虽然并不是很简洁：

具体讨论可以见：Usage of beforeRouteEnter with <script setup>

我用的 TS 所以下面是我的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  beforeRouteEnter(to, from, next) {
    // Do somethings
    next()
  }
})
</script>

<script lang="ts" setup>
// Do more things
</script>

你没看错，就是原来写在 <script setup> 中的逻辑不用变，另外写一个普通的 <script> 标签。

另外你可能有疑问：为什么不在路由定义中写路由独享守卫（Per-Route Guard）呢，这样不是更简单？

我的答案是：

各司其职，在路由定义中书写业务逻辑写中会打破边界（嗯，一切罪恶的开始~）

路由定义在项目中更适合担任目录、索引的角色，任何接触项目的开发者都需要这么一个地方，特别是刚接触项目的开发者。就像一本书，你见过有谁会将章节的内容写到目录中呢？

相关链接