vue3 vite ts 路由 params参数

一、区别

let route = useRoute()

注意：

1、params参数可选可不选，参数占位后面+?

2、path占位符

3、使用name

二、案例

1、跳转

<template><ul><RouterLink :to="{name:'detail',params: news}" v-for="news in newList" :key="news.id">{{ news.name }}</RouterLink></ul><div><RouterView></RouterView></div>
</template><script lang="ts" setup name="News">import { reactive } from "vue";import {RouterView, RouterLink} from 'vue-router'let newList = reactive([{id:'01', name:'小米', content:'小米汽车'},{id:'02', name:'理想', content:'大SUV'},{id:'03', name:'小鹏', content:'智驾汽车'}])
</script><style></style>

2、内容

<template><ul><li>新闻标题：{{ params.name }}</li><li>新闻内容：{{ params.content }}</li></ul>
</template><script lang="ts" setup name="Detail">// useRoute Hooks import { toRefs } from 'vue'
import {useRoute} from 'vue-router'let route = useRoute()let {params} = toRefs(route)
</script><style></style>