如何在 vue 3 中获取路由器的参数?

Posted

技术标签:

【中文标题】如何在 vue 3 中获取路由器的参数?【英文标题】:How to get params of router in 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 【参考方案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>

【讨论】:

以上是关于如何在 vue 3 中获取路由器的参数?的主要内容,如果未能解决你的问题,请参考以下文章

vue如何配置路由 获取路由的参数部分刷新页面缓存页面

vue中如何不通过路由直接获取url中的参数

如何获取组件取决于 vue 路由器参数?

vue路由传参3种方式

vue中获取url参数

vue中组件3种编程式路由跳转传参