Vue3从入门到实战：路由的query和params参数

最新推荐文章于 2024-04-27 15:06:55 发布
最新推荐文章于 2024-04-27 15:06:55 发布
阅读量5.4k 收藏 46
点赞数 26
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LHY537200/article/details/137325829
版权

在Vue 3中，我们可以通过路由的查询参数来传递数据。这意味着我们可以在不同的页面之间传递一些信息，以便页面可以根据这些信息来显示不同的内容或执行不同的操作。

 查询参数的使用方式类似于在URL中添加附加信息，以便页面之间可以根据这些信息进行交互和通信。这在很多应用中都非常有用，例如搜索功能、过滤功能、分页功能等等。

举个例子，假设我们有一个商品列表页面，用户可以在搜索框中输入关键字来搜索商品。当用户点击搜索按钮时，我们可以将输入的关键字作为查询参数添加到URL中，然后跳转到商品列表页面。在商品列表页面，我们可以通过读取查询参数的值来获取用户输入的关键字，并根据关键字来展示匹配的商品。

比如我在News组件中的detail使用了<RouterLink>组件来创建一个链接，指向径/news/detail 并且附带了查询参数a=哇哈哈,b=华为,c=小米。{、显示了新闻的标题。当用户点击这个链接时，URL将会变成/news/detail?a=1,b=2,c=3。注意，查询参数使用问号（?）来分隔路径和查询字符串。

未加参数前：

加参数后： 

当我点击新闻里的标题时，就会看到路径中附带的参数

但这并不是动态参数的绑定，即无论你点击哪个新闻标题，都是出现同一样的URL。

所以现在要讲到动态参数的绑定，即我点击不同的新闻标题时，可以对应出现不同的参数，

1.路由-query参数 

路由的查询参数是一种在URL中传递数据的机制。它们可以用于在不同的路由之间传递参数，以便组件可以根据这些参数进行不同的行为或显示不同的内容。

1.1 query参数的第一种写法

1.News组件传递query参数。
注意：

  • 在to前面加上":"
  • 在to的" "内加入反引号`（数字1的左边）
  • 用$ 连接对象

2.query传参后在detail组件中修改内容 

 

解析：

以上使用了route.query来访问查询参数。通过route.query.id、route.query.title和route.query.content，可以获取URL中的id、title和content查询参数的值，并将它们显示在列表项中。

在<script setup>部分，使用useRoute()函数从Vue Router中导入了route对象，并将它设置为响应式变量。这样就可以在模板中使用route.query来访问查询参数的值。
3.展示

 

 

 

 

News组件代码：

<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:'title01',title:'很好的抗癌食物',content:'西篮花'},
    {id:'title02',title:'如何一夜暴富',content:'学IT'},
    {id:'title03',title:'震惊，万万没想到',content:'明天是周一'},
    {id:'title04',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>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>

Detail组件代码： 

<template>
    <ul class="news-list">
      <li>编号:{{ route.query.id }}</li>
      <li>标题:{{ route.query.title  }}</li>
      <li>内容:{{ route.query.content  }}</li>
    </ul>
  </template>
  
  <script setup lang="ts" name="About">
  import { useRoute } from 'vue-router';
  let route =  useRoute();
  
  </script>
  
  <style scoped>
    .news-list {
      list-style: none;
      padding-left: 20px;
    }
  
    .news-list>li {
      line-height: 30px;
    }
  </style>

 

1.2 query参数的第二种写法

跳转并携带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> -->
        <!-- 第二种写法 -->
        <RouterLink 
          :to="{
            //name:'xiang', //用name也可以跳转
            path:'/news/detail',
            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:'title01',title:'很好的抗癌食物',content:'西篮花'},
    {id:'title02',title:'如何一夜暴富',content:'学IT'},
    {id:'title03',title:'震惊，万万没想到',content:'明天是周一'},
    {id:'title04',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>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>
  <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>

<style scoped>
  .news-list {
    list-style: none;
    padding-left: 20px;
  }

  .news-list>li {
    line-height: 30px;
  }
</style>

 

2.路由-params参数

2.1 params参数的第一种写法 

1.还原Detail组件

2.还原News组件

 3.在index.ts文件中子路的规则下占位

 

4.返回News组件中传入参数

 5.我们可以通过console.log(route)观察params的参数（这步骤可无）

 6.修改Detail组件的展示区（开始变成响应式）

 

7.修改News组件的内容（也是变成响应式）

 展示：（这是标题1的，后面点击其他标题展示区会对应出现内容，就不一一展开了）

 

 

2.2. params参数的第二种写法

跟query的第二种写法类似，但有一点要区分！！！

 

注意这里是用name配置项的 ，而不是用path配置项。

那如果我偏用path来配置呢，那就喜提报错！


 

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()
  console.log(route)
  
  </script>
  
  <style scoped>
    .news-list {
      list-style: none;
      padding-left: 20px;
    }
  
    .news-list>li {
      line-height: 30px;
    }
  </style>

News组件代码 

<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> -->
        <!-- 第二种写法 -->
        <RouterLink 
          :to="{
            name:'xiangqing',
            params:{
              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:'title01',title:'很好的抗癌食物',content:'西篮花'},
    {id:'title02',title:'如何一夜暴富',content:'学IT'},
    {id:'title03',title:'震惊，万万没想到',content:'明天是周一'},
    {id:'title04',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>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>

 

补充：

参数可传可不传的情况，比如：

 

 

再次提醒：

1.传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。

2.传递params参数时，需要提前在规则中占位。

 

小李同学_LHY
关注
  • 26
    点赞
  • 踩
  • 46
    收藏
    觉得还不错? 一键收藏
  • 24
    评论
详解vue嵌套路由-query传递参数
08-30
嵌套路由指的是在父路由中包含子路由，子路由可以继承父路由的参数和行为。在这种情况下，我们需要在父路由中传递参数给子路由，以便子路由可以正确地渲染内容。 现在，让我们看看如何使用 query 来传递参数。在 ...
浅谈vue-router2路由参数注意的问题
11-27
1、vue 路由 如果传递 params 定义路由的时候是 /路由名称：id 获取的时候 this.$route.params.id 最后形如 /路由名称/路由参数 传参的时候 params:{ str1:str1, str2:str2 } 2、如果传递query ?id=str…...
vue3:vue-router路由的使用
热门推荐
米儿的博客
08-04 3万+
目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得非常容易。 目前Vue路由最新的版本是4.x版本。 vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起...
6.（vue3.x+vite）路由传参query与params区别.rar
09-15
前端技术社区总目录有各种各样的前端示例其地址为： https://blog.csdn.net/m0_60387551/article/details/128017725
vue3路由跳转传递参数： params传参接收不到？
最新发布
LlanyW的专栏
04-27 1033
router地址必须是name方法跳转，接收：route.params。3.使用 History API 方式传递和接收。2.使用vuex、pinia对参数进行存储。1.使用query传递参数。2.不会造成地址栏不美观。
vue3 rouer params传参的问题
Passerby_K的博客
08-16 611
【代码】vue3 rouer params传参的问题。
vue3路由传参获取不到params，获取到为空
liuzaixi的博客
08-17 3857
注意：从Vue Router的2022-8-22 更新后，我们使用param传参在新页面无法获取数据。
vue Router(v3.x) 路由传参的三种方式详解
qq_43886365的博客
07-14 1万+
vue 路由传参的使用场景一般都是应用在父路由跳转到子路由时，携带参数跳转。传参方式可划分为 params 传参和 query 传参，而 params 传参又可分为在 url 中显示参数和不显示参数两种方式，这就是vue路由传参的三种方式。
【Vue3】路由的query参数和params参数
null18的博客
03-14 2097
路由参数是 Vue 路由系统中非常重要的一部分，通过动态路由参数、查询参数和路由元信息，我们可以实现更灵活的页面导航和数据传递。熟练掌握这些技巧可以帮助我们更好地构建复杂的单页面应用挑战与创造都是很痛苦的，但是很充实。
Vue笔记
Nie_XiaoGang的博客
09-15 865
Vue,vue-router,vuex笔记
Vue3 使用router，params传参为空，怎么办？
weixin_45288172的博客
04-03 4480
我们使用param传参在新页面无法获取数据。可以有其他解决办法：
vue3中，通过路由传参的几种形式
listener_life的博客
06-29 4431
vue3中，通过路由传参的几种方式
vue3中路由传递params和query参数和接收
qq_50526206的博客
07-21 2294
vue3中路由传递params和query参数和接收
vue router使用query和params传参的使用和区别
08-28
本篇文章主要介绍了vue router使用query和params传参的使用和区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅析vue-router中params和query的区别
10-15
在 Vue Router 中，`params` 和 `query` 是两种不同的参数传递方式，它们在使用场景和表现形式上有所差异。以下是关于 `params` 和 `query` 的详细解析。 1. 引入方式： - `query` 参数通常与动态路径中的 `path` ...
vue3路由跳转params传参接收不到？
seimeii的博客
08-11 741
vue3路由跳转params传参接收不到？
vue3路由配置及路由跳转传参
m0_57108418的博客
11-17 1万+
在src目录下创建pages文件夹，里面创建两个vue文件命名为student.vue,person.vue。在app.vue中进行路由展示，使用router-link进行路由跳转，to代表跳转到哪个路由。效果如下图所示，点击（到student路由）或（到person路由）会进行路由跳转。声明式路由通过router-link进行路由跳转，編程式路由通过函数实现。路由之间用router路由器，当前路由使用toute路由。student.vue和person.vue。通过router.push进行路由跳转。
路由传参params，vue3的vue-router已经把params传参给废弃了，你只能用params做动态的传参就是some:id,但是不能直接用params。
Frank_colo的博客
12-21 734
路由传参params，vue3的vue-router已经把params传参给废弃了，你只能用params做动态的传参就是some:id,但是不能直接用params。，你在a页面跳转b页面，传递参数，在b页面通过defineProps()函数拿到传递过来的参数。你可以在路由表中设置props:true，将some:id的id占位符数据。
vue3路由传参query和params
06-28
### 回答1： Vue3中的路由传参有两种方式：query和params。 query是通过URL中的查询参数传递参数，例如：/user?id=123&name=张三。在路由配置中，可以使用props属性将query参数映射到组件的props中。 params是通过URL中的路径参数传递参数，例如：/user/123。在路由配置中，需要使用动态路由配置来定义路径参数，例如：/user/:id。在组件中可以通过$route.params来获取路径参数。 需要注意的是，query参数是可选的，而params参数是必须的。另外，query参数可以在URL中直接修改，而params参数只能通过路由跳转来修改。 ### 回答2： Vue.js是一款流行的JavaScript框架之一，它具有易用、高效且灵活的特点。在Vue.js中，路由是非常重要的一个模块，而路由传参就是常见的需求。 Vue3版本中，路由传参主要有两种方式：query和params。 1. Query传参 Query传参是通过在URL中添加参数，从而将参数传递给目标组件。比如我们要传递一个名称为“name”，值为“user”的参数，可以在路由链接中添加“?name=user”的参数： ```javascript <router-link :to="{ path: '/user', query: { name: 'user' } }">User</router-link> ``` 在目标组件中，我们可以通过$router对象来访问参数： ```javascript this.$route.query.name // user ``` 2. Params传参 Params传参是通过在路由路径中添加参数，从而将参数传递给目标组件。以用户ID为例，我们可以在路由配置中添加“:id”参数： ```javascript { path: '/user/:id', name: 'User', component: User } ``` 在路由链接中，我们可以通过$router对象来设置参数： ```javascript <router-link :to="{ path: '/user/1' }">User 1</router-link> ``` 在目标组件中，我们可以通过$router对象来访问参数： ```javascript this.$route.params.id // 1 ``` 需要注意的是，我们在路由配置中定义的参数名和在路由链接中传递的参数名必须保持一致。另外，Params传参是不支持通过键值对的方式传递多个参数的。 总结 在Vue3中，路由传参有两种方式：query和params。Query传参是通过在URL中添加参数，Params传参是通过在路由路径中添加参数。在使用路由传参时，我们需要注意传递参数的方式和参数名的一致性，以确保传参能够正常工作。 ### 回答3： Vue3 是目前全球使用人数最多的前端框架之一，其中路由也是 Vue3 中非常重要的一个部分。在Vue3中，我们可以使用路由传递参数从一个页面到另一个页面。Vue3 路由传参分为两种方式：query和params。 1. query方式 query方式是通过URL传参的方式将参数进行传递和获取的。在URL后面加上 ?参数名=参数值，可以传递一个或多个参数，多个参数之间使用 & 符号连接。 比如，我们可以这样传递参数： ```javascript <router-link :to="{path:'/user',query:{id:1,name:'Tom'}}">用户</router-link> ``` 在路由中我们可以通过 `$route.query` 获取传递的参数,例如： ```javascript { path: '/user', name: 'user', component: User, query: { id: 1, name: 'Tom' } } ``` 2. params方式 params方式是通过路由路径中的参数将参数进行传递和获取的。使用这种方式传递参数时，参数会变成路由路径的一部分。 比如，我们可以这样传递参数： ```javascript <router-link :to="{ path: '/user/1/Tom' }">用户</router-link> ``` 在路由中我们可以通过 `$route.params` 获取传递的参数，例如： ```javascript { path: '/user/:id/:name', name: 'user', component: User, params: { id: 1, name: 'Tom' } } ``` 总的来说，Vue3 路由传参 query 和 params 都有其优劣势。query 参数可以传递任意数量的参数，但是 URL 中传递参数可能会因为长度而受限；params 参数可以在 URL 中优雅地显示要传递的参数，但是只能传递有限的参数，并且参数的顺序也很重要。根据实际情况，我们应该灵活使用不同的方式来进行参数传递。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 24
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值