【Vue3】路由的query参数和params参数

news2025/3/12 10:06:13

💗💗💗欢迎来到我的博客，你将找到有关如何使用技术解决问题的文章，也会找到某个技术的学习路线。无论你是何种职业，我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章，也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临，让我们一起踏上这个知识之旅！

文章目录

🍀路由中的参数
🍀query参数
🍀params参数
🍀区别和适用场景
🍀总结

🍀路由中的参数

在 Vue 中，路由参数是指在访问不同页面时传递的信息。它们可以用来动态地构建页面内容，实现页面间的数据传递和状态管理。Vue 的路由系统提供了多种方式来处理路由参数，包括动态路由、查询参数和路由元信息等

🍀query参数

我们接着使用上节用到的相关代码，在路径匹配后面我们加了一个问号，在问号后面我们加了一个参数

<template>
  <div class="plays">
    <!--导航区-->
    <ul>
      <li v-for="play in newList" :key="play.id">
        <RouterLink to="/plays/detail?a=1">{{play.title}}</RouterLink>
    </li>
    </ul>
    <!--展示区-->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

在地址栏我们可以清楚的看到，但是这也仅仅是浅浅看一看

在这里插入图片描述
接下来我们打开Detail.vue文件，我们导入一个useRoute

通过useRoute可以方便地访问当前路由的路径、参数、查询参数等信息，而不需要依赖于this.$route。

接下来我们应该实例化一下函数，之后我们就可以在上面的模版中尽显表达了

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

但是现在其实我们并不能匹配到id、title、content，可以匹配到的或许仅仅是a，然后显示出1，接下来我们要解决这个问题

<template>
  <div class="plays">
    <!--导航区-->
    <ul>
      <li v-for="play in newList" :key="play.id">
        <RouterLink :to="`/plays/detail?id=${play.id}`">{{play.title}}</RouterLink>
    </li>
    </ul>
    <!--展示区-->
    <div class="news-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

这样我们就可以点击哪个出现哪个对应的编号了
请添加图片描述
修改后的如下

<RouterLink :to="`/plays/detail?id=${play.id}&title=${play.title}&content=${play.content}`">{{play.title}}</RouterLink>

在这里插入图片描述

上面的是第一种写法
下面是第二种写法

 <RouterLink 
          :to="{
            name:'detail',
            query:{
              id:play.id,
              title:play.title,
              content:play.content
            }
          }"
        >
          {{play.title}}
        </RouterLink>

🍀params参数

还是需要useRoute的导入，接下来我们需要修改一下index.ts中的path

后面的问号表示可有可无

path:'Detail/:id/:title/:content?',

模版这里也要修改一下

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

同样也有两种写法

  </RouterLink> -->
          <!-- <RouterLink :to="`/news/detail/${play.id}/${play.title}/${play.content}`">{{play.title}}</RouterLink> -->
          <RouterLink 
          :to="{
            name:'Detail',
            params:{
              id:play.id,
              title:play.title,
              content:play.content
            }
          }"
        >
          {{play.title}}
        </RouterLink>