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) } }) }, }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。