[vue-router4进阶] 5.在组合API中使用vue-r

我们以之前写的用户详情页为例，把之前获取参数的功能改写为组合API的方式。
之前vueDetail.vue的代码：

<template>
  <div class="page">用户详情页获取到了id：{{ id }},他的名字是：{{ name }}</div>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: '',
    }
  },
  mounted() {
    this.id = this.$route.params.id
    this.name = this.$route.query.name
  },
}
</script>

下面我们来使用组合API获取参数，
获取到route对象，需要导入useRoute方法：

import { useRoute } from 'vue-router'

调用useRoute就可以获取到route对象了

const route = useRoute() 

然后我们就可以把useDetail.vue的script部分改成组合API了：

import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
export default {
  setup() {
    const route = useRoute() // 新增
    const id = ref('')
    const name = ref('')
    onMounted(() => {
      id.value = route.params.id // 新增
      name.value = route.query.name // 新增
    })
    return {
      id,
      name,
    }
  },
}

同样，可以使用useRouter方法获取router对象，咱们再增加一个div，点击后进入首页：

import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
export default {
  setup() {
    const route = useRoute()
    const id = ref('')
    const name = ref('')
    onMounted(() => {
      id.value = route.params.id
      name.value = route.query.name
    })

    const router = useRouter() // 新增
    const onBack = () => {
      router.push('/index') // 新增
    }
    return {
      id,
      name,
      onBack,
    }
  },
}

这节课内容就是这些了，只要调用useRoute和useRouter就可以获取到route和router对象了。大家可以自己写一写，试一试。