Vue3中路由传参的几种方式实践

【1】RouterLink+query

父组件脚本如下:

<script setup lang="ts" name="News">
  import {reactive} from 'vue'
  import {RouterView,RouterLink} from 'vue-router'

  const newsList = reactive([
    {id:'asfdtrfay01',title:'很好的抗癌食物',content:'西蓝花'},
    {id:'asfdtrfay02',title:'如何一夜暴富',content:'学IT'},
    {id:'asfdtrfay03',title:'震惊，万万没想到',content:'明天是周一'},
    {id:'asfdtrfay04',title:'好消息！好消息！',content:'快过年了'}
  ])

</script>

第一种写法，直接拼接路径

<ul>
  <li v-for="news in newsList" :key="news.id">
    <!-- 第一种写法 -->
    <RouterLink :to="`/news/detail?id=${news.id}&title=${news.title}&content=${news.content}`">
    	{{news.title}}
    </RouterLink>

  </li>
</ul>
<div class="news-content">
  <RouterView></RouterView>
</div>

在 Vue.js 中，反引号（``）通常用于模板字符串（Template literals）。模板字符串是 ES6 引入的一种新的字符串类型，允许将表达式嵌入到字符串中。在 JavaScript 中，你可以使用反引号来创建一个字符串，并在其中使用${}语法来插入变量或表达式的值。

子组件接收：

<template>
  <ul class="news-list">
    <li>编号：{{ query.id }}</li>
    <li>标题：{{ query.title }}</li>
    <li>内容：{{ query.content }}</li>
  </ul>
</template>

<script setup lang="ts" name="About">
  import {toRefs} from 'vue'
  import {useRoute} from 'vue-router'
  let route = useRoute()
  //解构
  let {query} = toRefs(route)
</script>

第二种写法，对象

<ul>
 <li v-for="news in newsList" :key="news.id">
   <!-- 第二种写法 -->
   <RouterLink 
     :to="{
       name:'xiang',
       query:{
         id:news.id,
         title:news.title,
         content:news.content
       }
     }"
   >
     {{news.title}}
   </RouterLink>

 </li>
</ul>

【2】RouterLink+params

第一种写法，直接拼路径

<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <!-- 第一种写法 -->
        <RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}}</RouterLink>
      </li>
    </ul>
    <!-- 展示区 -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

路由配置需要进行占位：

{
  name:'xinwen',
  path:'/news',
  component:News,
  children:[
    {
      name:'xiang',
      path:'detail/:id/:title/:content?',
      component:Detail
    }
  ]
},

子组件接收：

<template>
  <ul class="news-list">
    <li>编号：{{ route.params.id }}</li>
    <li>标题：{{ route.params.title }}</li>
    <li>内容：{{ route.params.content }}</li>
  </ul>
</template>

<script setup lang="ts" name="About">
  import {useRoute} from 'vue-router'
  const route = useRoute()
  // 这里没有对route 进行解构得到params
</script>

第二种写法，对象

<RouterLink 
  :to="{
    name:'xiang',
    params:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  }"
>
  {{news.title}}
</RouterLink>

相比params，个人推荐使用query，更为直接明了。

【3】路由的props配置

作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）

{
	name:'xiang',
	path:'detail/:id/:title/:content',
	component:Detail,

  // props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
  // props:{a:1,b:2,c:3}, 

  // props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
  // props:true
  
  // props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
  props(route){
    return route.query
  }
}

修改params传参

路由组件修改：

{
    name:'xinwen',
    path:'/news',
    component:News,
    children:[
      {
        name:'xiang',
        path:'detail',
        component:Detail,
        props:true,
      }
    ]
  }

detail组件修改：

<template>
  <ul class="news-list">
    <li>编号：{{id}}</li>
    <li>标题：{{title}}</li>
    <li>内容：{{content}}</li>
  </ul>
</template>

<script setup lang="ts" name="About">
  defineProps(['id','title','content'])
</script>

修改query传参

{
	name:'xiang',
	path:'detail/:id/:title/:content',
	component:Detail,
  // props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
	  props(route){
	    return route.query
	  }
}

detail组件修改：

<template>
  <ul class="news-list">
    <li>编号：{{id}}</li>
    <li>标题：{{title}}</li>
    <li>内容：{{content}}</li>
  </ul>
</template>

<script setup lang="ts" name="About">
  defineProps(['id','title','content'])
</script>