如何在 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 中获取路由器的参数?的主要内容,如果未能解决你的问题,请参考以下文章