快捷導(dǎo)航

vue3.0?setup中使用vue-router問題

更新時間：2022年10月19日 10:51:57 作者：ratel?

這篇文章主要介紹了vue3.0?setup中使用vue-router問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3.0 setup中使用vue-router

在vue2.0中，我們通過this.$route可以獲取到當(dāng)前的路由，然后通過this.$router來獲取到路由實(shí)例來進(jìn)行路由跳轉(zhuǎn)，但是在setup中，我們是無法拿到this的，這也意味著我們不能像vue2.0那樣去使用vue-router, 此時就需要像下面這樣去使用

import { useRoute, useRouter } from 'vue-router'
?
export default {
? setup() {
? ? // 獲取當(dāng)前路由
? ? const route = useRoute()
? ? // 獲取路由實(shí)例
? ? const router = useRouter()
? ? // 當(dāng)前路由發(fā)生變化時，調(diào)用回調(diào)函數(shù)
? ? watch(() => route, () => {
? ? ? // 回調(diào)函數(shù)
? ? }, {
? ? ? immediate: true,
? ? ? deep: true
? ? })
? ??
? ? // 路由跳轉(zhuǎn)
? ? function goHome() {
? ? ? router.push({
? ? ? ? path: '/home'
? ? ? })
? ? }
? ??
? ? return {
? ? ? goHome()
? ? }
? }
}

上面代碼使用watch來監(jiān)聽路由是否發(fā)生變化，除了watch之外，也可以使用vue-router提供的生命周期函數(shù)

import { onBeforeRouteUpdate, useRoute } from 'vue-router'
export default {
? setup() {
? ? onBeforeRouteUpdate(() => {
? ? ? // 當(dāng)前路由發(fā)生變化時，調(diào)用回調(diào)函數(shù)
? ? })
? }
}

除了onBeforeRouteUpdate之外 vue-router在路由離開的時候也提供了一個生命周期鉤子函數(shù)

onBeforeRouteLeave(() => {
? ?console.log('當(dāng)前頁面路由離開的時候調(diào)用')
})

vue-router4與vue3的setup使用

在 setup 中訪問路由和當(dāng)前路由

因?yàn)槲覀冊?setup 里面沒有訪問 this，所以我們不能再直接訪問 this.router 或 this.route。

使用useRouter和useRoute來代替

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

route 對象是一個響應(yīng)式對象

所以它的任何屬性都可以被監(jiān)聽，但你應(yīng)該避免監(jiān)聽整個 route 對象。在大多數(shù)情況下，你應(yīng)該直接監(jiān)聽你期望改變的參數(shù)。

import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'
export default {
  setup() {
    const route = useRoute()
    const userData = ref()
    // 當(dāng)參數(shù)更改時獲取用戶信息
    watch(
      () => route.params.id,
      async newId => {
        userData.value = await fetchUser(newId)
      }
    )
  },
}

請注意，在模板中我們仍然可以訪問 $router 和 $route，所以不需要在 setup 中返回 router 或 route。

導(dǎo)航守衛(wèi)

Vue Router 將更新和離開守衛(wèi)作為組合式 API 函數(shù)公開

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!'
      )
      // 取消導(dǎo)航并停留在同一頁面上
      if (!answer) return false
    })
    const userData = ref()
    // 與 beforeRouteUpdate 相同，無法訪問 `this`
    onBeforeRouteUpdate(async (to, from) => {
      //僅當(dāng) id 更改時才獲取用戶，例如僅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}

以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: