vue3-监听当前路由-获取全部路由

T-小丑

于 2024-03-08 09:48:50 发布

阅读量2.2k

点赞数 7

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43932092/article/details/136553604

版权

本文介绍了如何在Vue应用的app.vue组件中使用`scriptsetup`和VueRouter的API实现路由监听以及数据获取。作者展示了如何在组件生命周期中使用`watch`和`useRoute`来跟踪路由变化，并打印出所有路由信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在app.vue页面中

<script setup>
import { ref, reactive, provide, onBeforeMount, onMounted, watch, inject,getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
//路由跳转
const router = useRouter()
//获取数据
const route = useRoute()
const { proxy } = getCurrentInstance();

//监听当前路由
watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
  //获取所有路由
  var allroute = proxy.$router.options.routes
  console.log('oldValue:'+oldValue)
  console.log('newValue:'+newValue)
  console.log(allroute)
}, { immediate: true })

</script>