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

目录

• vue3.0 setup中使用vue-router
• vue-router4与vue3的setup使用
• 在 setup 中访问路由和当前路由
• route 对象是一个响应式对象
• 导航守卫

vue3.0 setup中使用vue-router

在vue2.0中，我们通过this.$route可以获取到当前的路由，然后通过this.$router来获取到路由实例来进行路由跳转，但是在setup中，我们是无法拿到this的，这也意味着我们不能像vue2.0那样去使用vue-router, 此时就需要像下面这样去使用

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

上面代码使用watch来监听路由是否发生变化，除了watch之外，也可以使用vue-router提供的生命周期函数

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

除了onBeforeRouteUpdate之外 vue-router在路由离开的时候也提供了一个生命周期钩子函数

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

vue-router4与vue3的setup使用

在 setup 中访问路由和当前路由

因为我们在 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 对象是一个响应式对象

所以它的任何属性都可以被监听，但你应该避免监听整个 route 对象。在大多数情况下，你应该直接监听你期望改变的参数。

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

请注意，在模板中我们仍然可以访问 $router 和 $route，所以不需要在 setup 中返回 router 或 route。

导航守卫

Vue Router 将更新和离开守卫作为 组合式 API 函数公开

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。