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('当前页面路由离开的时候调用')
})