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>