快捷導(dǎo)航

vue3.0?setup中使用vue-router問(wèn)題

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

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

vue3.0 setup中使用vue-router

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

import { useRoute, useRouter } from 'vue-router'
?
export default {
? setup() {
? ? // 獲取當(dāng)前路由
? ? const route = useRoute()
? ? // 獲取路由實(shí)例
? ? const router = useRouter()
? ? // 當(dāng)前路由發(fā)生變化時(shí)，調(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來(lái)監(jiān)聽(tīng)路由是否發(fā)生變化，除了watch之外，也可以使用vue-router提供的生命周期函數(shù)

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

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

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

vue-router4與vue3的setup使用

在 setup 中訪(fǎng)問(wèn)路由和當(dāng)前路由

因?yàn)槲覀冊(cè)?setup 里面沒(méi)有訪(fǎng)問(wèn) this，所以我們不能再直接訪(fǎng)問(wèn) this.router 或 this.route。

使用useRouter和useRoute來(lái)代替

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 對(duì)象是一個(gè)響應(yīng)式對(duì)象

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

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

請(qǐng)注意，在模板中我們仍然可以訪(fǎng)問(wèn) $router 和 $route，所以不需要在 setup 中返回 router 或 route。

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

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

import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
import { ref } from 'vue'
export default {
  setup() {
    // 與 beforeRouteLeave 相同，無(wú)法訪(fǎng)問(wèn) `this`
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm(
        'Do you really want to leave? you have unsaved changes!'
      )
      // 取消導(dǎo)航并停留在同一頁(yè)面上
      if (!answer) return false
    })
    const userData = ref()
    // 與 beforeRouteUpdate 相同，無(wú)法訪(fǎng)問(wèn) `this`
    onBeforeRouteUpdate(async (to, from) => {
      //僅當(dāng) id 更改時(shí)才獲取用戶(hù)，例如僅 query 或 hash 值已更改
      if (to.params.id !== from.params.id) {
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}

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

您可能感興趣的文章: