vue3.0 setup中使用vue-router问题_vue.js_

import { useRoute, useRouter } from 'vue-router'   export default {   setup() {     // 获取当前路由     const route = useRoute()     // 获取路由实例     const router = useRouter()     // 当前路由发生变化时，调用回调函数     watch(() => route, () => {       // 回调函数     }, {       immediate: true,       deep: true     })          // 路由跳转     function goHome() {       router.push({         path: '/home'       })     }          return {       goHome()     }   } }

import { onBeforeRouteUpdate, useRoute } from 'vue-router' export default {   setup() {     onBeforeRouteUpdate(() => {       // 当前路由发生变化时，调用回调函数     })   } }

onBeforeRouteLeave(() => {    console.log('当前页面路由离开的时候调用') })

import{ useRouter， useRoute} from ‘vue-router' export default { setup() { const router = useRouter() const route = useRoute() function pushWithQuery(query) { router.push({ name: 'search', query: { ...route.query, }, }) } }, } 

import { useRoute } from 'vue-router' import { ref, watch } from 'vue' export default { setup() { const route = useRoute() const userData = ref() // 当参数更改时获取用户信息 watch( () => route.params.id, async newId => { userData.value = await fetchUser(newId) } ) }, } 

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) } }) }, }