vue3.0路由参数获取方法

方法一：通过引入 "vue-router" 的 useRouterimport { useRouter, onMounted } from 'vue-router'setup (props, context) {const router = useRouter();onMounted(() => {// 打印console.log('router:', router.currentRoute

Leslie_hxd

13467人浏览 · 2021-10-15 09:42:36

Leslie_hxd · 2021-10-15 09:42:36 发布

方法一：通过引入 "vue-router" 的 useRouter

import { useRouter, onMounted } from 'vue-router'

setup (props, context) {
    const router = useRouter();
    onMounted(() => {
      // 打印
      console.log('router:', router.currentRoute.value.query)
    })
    return {}
  }

方法二：通过引入 "vue-router" 的 useRoute

import { useRoute, onMounted, toRaw } from 'vue-router'

setup (props, context) {
    const route = useRoute();
    onMounted(() => {
      // 打印
      console.log('route:', toRaw(route).query.value)
    })
    return {}
  }

注意点：useRouter和useRoute函数不能在setup里面的函数内执行，要放在顶部或者其他位置，不然作用域改变，执行后的router/route是 undefined