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