vue3 vite 路由query传参

一、区别

没有 this.route

let route = userRoute()

route 相当于 this.route

二、路由

<template>
  <ul>
    <RouterLink :to="{
      path:'/news/detail',
      query: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>

三、内容((接收参数)

<template>
  <ul>
    <li>新闻标题：{{ route.query.name }}</li>
    <li>新闻内容：{{ route.query.content }}</li>
  </ul>
</template>

<script lang="ts" setup name="Detail">
    // useRoute Hooks 
    import {useRoute} from 'vue-router'
    let route = useRoute()
    console.log(route);
</script>

<style>

</style>