vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3路由传参详解

Vue3中的路由传参两种方式举例详解

作者：小二爱编程·

这篇文章主要给大家介绍了关于Vue3中的路由传参两种方式的相关资料,Vue Router支持query和params传参,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在Vue应用中，路由传参是非常常见的需求，它允许我们在不同的组件之间传递数据。Vue Router提供了两种主要的方式来传递参数：query参数和params参数。下面我们将详细探讨这两种传参方式的使用方法和注意事项。

一、query参数

Query参数，顾名思义，是附加在URL后面的查询字符串，以?开头，后面跟着一系列的key=value对，多个键值对之间用&分隔。

1. 传递参数

在主路由中定义跳转的子路由，使用<router-link>组件可以方便地实现query参数的传递。有两种方式来指定to属性：字符串写法和对象写法。

<template>
  <div class="news">
    <!-- 导航区 -->
    <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>
  </div>
</template>

<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>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li::marker {
  color: #64967E;
}
.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style> 
<template>
  <div class="news">
    <!-- 导航区 -->
    <ul>
      <li v-for="news in newsList" :key="news.id">
       <!-- 第二种写法
         指定路由名称
         参数query列表
         -->
        <RouterLink 
          :to="{
            name:'xiang',
            query:{
              id:news.id,
              title:news.title,
              content:news.content
            }
          }"
        >
          {{news.title}}
        </RouterLink>

      </li>
    </ul>
    <!-- 展示区
     点击 路由跳转 内容展示到 路由展示区
    -->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<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>

<style scoped>
/* 新闻 */
.news {
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  height: 100%;
}
.news ul {
  margin-top: 30px;
  /* list-style: none; */
  padding-left: 10px;
}
.news li::marker {
  color: #64967E;
}
.news li>a {
  font-size: 18px;
  line-height: 40px;
  text-decoration: none;
  color: #64967E;
  text-shadow: 0 0 1px rgb(0, 84, 0);
}
.news-content {
  width: 70%;
  height: 90%;
  border: 1px solid;
  margin-top: 20px;
  border-radius: 10px;
}
</style>

2. 接收参数

在目标组件中，也就是上述定义的'xiang'路由组件，我们可以使用useRoute来获取传递过来的query参数。useRoute返回一个响应式的路由对象，其中的query属性包含了所有的查询参数。

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

<script setup lang="ts" name="Detail">
  import {toRefs} from 'vue'
  import {useRoute} from 'vue-router'
  // 接收跳转请求的query参数
  let route = useRoute()
  console.log(route.query)
  let {query} = toRefs(route)


</script>

运行结果如下，在控制台可以接收到路由请求参数。

二、params参数

Params参数是通过URL的路径部分来传递参数的，通常用于传递动态路由参数。

1. 传递参数

同样地，我们使用<router-link>组件来传递params参数。但需要注意的是，如果使用对象写法来指定to属性，我们必须使用路由的name配置项，而不能直接使用path。

<RouterLink :to="`/news/detail/${news.id}/${news.title}/${news.content}`">{{news.title}}</RouterLink>
<RouterLink 
  :to="{
    name:'xiang', // 使用name配置项
    params:{
      id:news.id,
      title:news.title,
      content:news.content
    }
  }"
>
  {{news.title}}
</RouterLink>

2. 接收参数

在目标组件中，我们同样可以使用useRoute来获取传递过来的params参数。但这次我们需要访问的是route.params属性。

<template>
  <ul class="news-list">
    <!--获取路由param的参数-->
    <li>编号：{{ route.params.id }}</li>
    <li>标题：{{ route.params.title }}</li>
    <li>内容：{{ route.params.content }}</li>
  </ul>
</template>

<script setup lang="ts" name="Detail">
  import {toRefs} from 'vue'
  import {useRoute} from 'vue-router'
  // 接收跳转请求的param参数
  let route = useRoute()
  console.log(route)

</script>

需要注意的是，使用param获取路由参数，需要在路由定义的ts文件中，定义好参数，如：

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

三、总结

到此这篇关于Vue3中的路由传参两种方式的文章就介绍到这了,更多相关Vue3路由传参详解内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文