如何在 vue 3 中获取路由器的参数？答案

【问题标题】：How to get params of router in vue 3?如何在 vue 3 中获取路由器的参数？
【发布时间】：2021-03-24 19:43:11
【问题描述】：

我在 Vue.js 3 和 TypeScript 中创建了一个项目。

路由器.js

{
    path: "/app/:id",
    name: "Detail",
    component: Detail,
    props: true
  },

App.js

<script lang="ts">

...

onMounted(() => {
      const id = $route.params.id;
      ...
    });

但这会导致错误：

"Cannot find name '$route'."

我做错了什么？

【问题讨论】：

使用 this.$route

标签： typescript vue.js vuejs3

【解决方案1】：

Vue Router 4.x 为此提供了useRoute()：

import { useRoute } from 'vue-router'

export default {
  setup() {
    const route = useRoute()

    onMounted(() => {
      const id = route.params.id
    })
  }
}

demo

【讨论】：

【解决方案2】：

如果我们使用最新的 Vue 3 'script setup' SFC 方式，那么

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

const route = useRoute();  
const id = route.params.id; // read parameter id (it is reactive) 

</script>

【讨论】：