vue3怎么在组件中用beforeRouteEnter

vue3怎么在组件中用beforeRouteEnter

阅读 25.1k
3 个回答

正常写,只要别写在 setup 里就可以。

export default {
    beforeRouteEnter(to, from, next) {
       // balabala
    },

    setup() {
       // balabala
    }
}
新手上路,请多包涵
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
import { ref } from 'vue'

export default {
  setup() {
    // 与 beforeRouteLeave 相同,无法访问 `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // 取消导航并停留在同一页面上
      if (!answer) return false
    })

    const userData = ref()

    // 与 beforeRouteUpdate 相同,无法访问 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //仅当 id 更改时才获取用户,例如仅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}
<script lang="ts">
export default {
   beforeRouteEnter(to: any, from: any) {
     console.log("salesOrder beforeRouteEnter",to ,from)
   },
   beforeRouteLeave(to: any, from: any) {
     console.log("salesOrder beforeRouteLeave",to ,from)
   },
}
</script>
<script setup lang="ts" name="xxx">
 // 语法糖代码
</script>

切记,lang类型要相同.而且语法糖写法代码后置.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题