vue3-router@4中,没有了this任何使用router和route

279 阅读1分钟

由于vue3组件中无法访问 this, 因此无法访问 this.routethis.route 与 this.router

解决方法(总的来说,语法和vue2的差不多,只是没有了this和$)

1.通过useRoute()可以获取页面 route 信息

<script setup>
   import { useRoute } from 'vue-router'

   const route = useRoute()
   //获取到当前路由路径(基本路径)
   console.log(route.path)
   //获取到当前路由路径(带参数的完整路径)
   console.log(route.fullPath)
   //获取路径上的参数(id)
   console.log(route.query)
</script>

2.通过 useRouter() 可以获取 router 路由实例信息

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
const login = () => {
//路由跳转
  router.push('/home')
}
</script>