【vue3】在setup组合式api中不能使用beforeRouterEnter,监听来源路由和跳转的目标路由

这篇具有很好参考价值的文章主要介绍了【vue3】在setup组合式api中不能使用beforeRouterEnter,监听来源路由和跳转的目标路由。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

注意了,在vue3中的setup函数中是不可以使用beforeRouterEnter这个路由守卫的,请看vue-router的官方文档

【vue3】在setup组合式api中不能使用beforeRouterEnter,监听来源路由和跳转的目标路由,vue,javascript,前端,vue.js

 导航守卫 | Vue Router

由此可见,在使用组合式api的时候,只有update和leave守卫,不符合我们的要求。

使用 <script  setup></script>这种形式的脚本,无法监听来源路由

<script lang="ts" setup>
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
onBeforeRouteLeave(() => {
	// 在setup中只有这两个钩子
})
onBeforeRouteUpdate(() => {
	//
})
</script>

方法一、我们可以在设置路由的时候,使用beforeEnter方法拦截,即在router.js中:

{
    path: '/',
    name: 'home
	component: () => import('@/xxx.vue'),
    beforeEnter: (to, from) => {
		// 可以在定义路由的时候监听from和to
	}
}

 方法二、我们还可以使用vue2的写法,使用选项式api,就可以使用beforeRouterEnter这个钩子了 文章来源地址https://www.toymoban.com/news/detail-542744.html

<script lang="ts">
export default {
	beforeRouteEnter(to, from) {
		console.log('before router enter', to, from)
	},
	mounted() {
		console.log('mounted')
	},
}
</script>

到了这里,关于【vue3】在setup组合式api中不能使用beforeRouterEnter,监听来源路由和跳转的目标路由的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3的组合式API中如何使用provide/inject?

    听说 Vue 3 加入了超多酷炫的新功能,比如组合式 API 等等。今天我们就来聊聊 Vue 3 中的组合式 API,并且如何使用 provide/inject 来搞定它! 首先,我们来了解一下组合式 API 是什么。其实,组合式 API 就是一个用来构建和组合函数的工具,它能让我们的代码更加简洁、可读性更

    2024年02月11日
    浏览(44)
  • vue3 组合式api中 ref 和$parent 的使用

    ref 的使用 vue3中, 在 组件中添加一个 component ref=“xxx” ,就可以在父组件中得到 子组件的 dom 对象, 以及 虚拟的 dom 对象, 有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了 ref 的使用方法 vue3中ref 的特点 以上如果在vue2中,就可以使用 子组件的对象来改变子组件的

    2024年02月10日
    浏览(44)
  • Vue3:Typescript与组合式API、defineProps、defineEmits等使用

    使用 defineProps() 使用 script setup 在使用 script setup 时, defineProps() 宏函数支持从它的参数中推导类型: 运行时声明 基于类型的声明 注意:接口或对象字面类型可以包含从其他文件导入的类型引用,但是,传递给 defineProps 的泛型参数本身不能是一个导入的类型, 这是因为Vue

    2023年04月20日
    浏览(83)
  • Vue3组合式API

    目录 composition API vs options API 体验 composition API setup 函数 reactive 函数 ref 函数 script setup 语法 计算属性 computed 函数 监听器 watch 函数 生命周期 模板中 ref 的使用 组件通讯 - 父传子 组件通讯 - 子传父 依赖注入 - provide 和 inject 保持响应式 - toRefs 函数 vue2 采用的就是 options API (

    2024年02月07日
    浏览(66)
  • vue3组合式API介绍

    根据官方的说法,vue3.0的变化包括性能上的改进、更小的 bundle 体积、对 TypeScript 更好的支持、用于处理大规模用例的全新 API,全新的api指的就是本文主要要说的组合式api。 在 vue3 版本之前,我们复用组件(或者提取和重用多个组件之间的逻辑),通常有以下几种方式: M

    2023年04月22日
    浏览(63)
  • 快速入门vue3组合式API

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 使用create-vue创建项目 熟悉项目目录和关键文件  组合式API  setup选项 setup选项的写法和执行时机 script setup 语法糖 reactive和ref函数 reactive() ref() computed watch 侦听单个数据

    2024年02月12日
    浏览(50)
  • 【Vue3】如何创建Vue3项目及组合式API

    文章目录 前言 一、如何创建vue3项目? ①使用 vue-cli 创建  ②使用可视化ui创建  ③npm init vite-app   ④npm init vue@latest 二、 API 风格 2.1 选项式 API (Options API) 2.2 组合式 API (Composition API) 总结 例如:随着前端领域的不断发展,vue3学习这门技术也越来越重要,很多人都开启了学习

    2024年02月03日
    浏览(65)
  • vue3 组合式 api 单文件组件写法

    Vue3 中的 Composition API 是一种新的编写组件逻辑的方式,它提供了更好的代码组织、类型推导、测试支持和复用性。相比于 Vue2 的 Options API,Composition API 更加灵活和可扩展。 在 Composition API 中,我们使用 setup 函数来定义组件的逻辑部分。setup 函数是一个特殊的函数,在创建组

    2024年02月12日
    浏览(41)
  • vue3组合式api单文件组件写法

    一,模板部分  二,js逻辑部分 

    2024年02月13日
    浏览(51)
  • 带你了解vue3组合式api基本写法

    本文的目的,是为了让已经有 Vue2 开发经验的 人 ,快速掌握 Vue3 的写法。 因此, 本篇假定你已经掌握 Vue 的核心内容 ,只为你介绍编写 Vue3 代码,需要了解的内容。 一、Vue3 里 script 的三种写法 首先,Vue3 新增了一个叫做组合式 api 的东西,英文名叫 Composition API。因此 Vu

    2024年02月01日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包