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

r囧r小猫 2024-04-26 01:47 93阅读 0赞

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

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

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

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

**未加参数前：**

![f31dde7129bc48919e245fe517cc2e20.png][]

**加参数后：**

![62a93f119cca414fbd21fd5d3c6632f7.png][]

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

![ca46183fcc9f403cba610420e2b10a02.png][]

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

![42186ad3fd944476a3772464ad3cbf45.png][]

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

### **1.路由-query参数**  ###

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

#### **1.1 query参数的第一种写法** ####

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

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

![4d5be7524c7548ea8c1a8ed79916d58e.png][]

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

![2840bf06cf3d488d82991eb307e3e14c.png][]

**解析：**

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

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

![87aed24a69fc46f38d8ac1e299a9dbb3.png][]

![e3f87ac599604aadb3928c474e2cce77.png][]

![50a832da1b1f4f08aab174402533b871.png][]

![77fe1130ef544c8eb88832be0fba9ab3.png][]

**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的对象写法）**

![6e9e7e61ad714a87aa894f31d6b8bf55.png][]

**代码：**

<template>
      <div class="news">
        
        <ul>
          <li v-for="news in newsList" :key="news.id">
            
            
            <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>

**补充：**

![0b7a90f5dd7744a18fdb138e3da85c44.png][]

有时候，你会觉得比较冗余，是否能简化一下，可以的。

![be112c737b88494096c6e253ddde499b.png][] **整体代码：**

<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组件**

![18351e6850894e1ea88a14d179d55afa.png][]

**2.还原News组件**

![837845dfff504785ac3e810bf0c0d97d.png][] **3.在index.ts文件中子路的规则下占位**

![f66cdb9fdd50413899b424a69905faa3.png][]

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

![450afe612d814939b33d504c95bda567.png][]

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

![10a28af7b249483f883f7c3a93594f41.png][]

![8c5e0e7f7c0b4de1b295b6ed8c1162c6.png][]

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

![eda45d10fb02406abf145706d912f1c2.png][]

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

![27810a48e0d5422dafb63d856a0516cf.png][] **展示：（这是标题1的，后面点击其他标题展示区会对应出现内容，就不一一展开了）**

![6123afb49ebf486fb79cbe435ac9e9ee.png][]

--------------------

#### **2.2. params参数的第二种写法** ####

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

![cf6ed0aad0d540c7af61b71d2228e3b2.png][]

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

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

![5e6f267802a6476e9ec08f30fba8b382.png][]  
![907476de74794004b87c824db4397c43.png][]

--------------------

**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="{
                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>

--------------------

**补充：**

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

![40d81135f0aa4c17b49e2d3ca3c40651.png][]

![4e2eb30b55ea4bcd91aeb4d4213adb7c.png][]

![f64ba7e1fe464ad2ad0db3e865b17f9d.png][]

**再次提醒：**

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

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

[f31dde7129bc48919e245fe517cc2e20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4c955acf710342b4933f68cea9aa8222.png
[62a93f119cca414fbd21fd5d3c6632f7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f122ec66ab15448a8384a3dd13498239.png
[ca46183fcc9f403cba610420e2b10a02.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e07c971c4f4f40bbb6e5a0e751ecc12c.png
[42186ad3fd944476a3772464ad3cbf45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/142a5961fe51479fb663b342ebec5fc8.png
[4d5be7524c7548ea8c1a8ed79916d58e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/bd3d60fdcb4240ddb1ff257962955158.png
[2840bf06cf3d488d82991eb307e3e14c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ee695cb6508f48d69aaa80ada9ff8b6c.png
[87aed24a69fc46f38d8ac1e299a9dbb3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f50d9a6df979487c9d6f6707afe32793.png
[e3f87ac599604aadb3928c474e2cce77.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/249335bd2e214b7a9aa07d2a98d3527a.png
[50a832da1b1f4f08aab174402533b871.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/a8aa3f0b84214504953eecdc18f60bee.png
[77fe1130ef544c8eb88832be0fba9ab3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/34cc3b463e3741cc93d7ba30e007d2aa.png
[6e9e7e61ad714a87aa894f31d6b8bf55.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/f43fdb7b00624ffebe87d19542b1547f.png
[0b7a90f5dd7744a18fdb138e3da85c44.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/8ee08faadae3441eb9d71547b50f3e4e.png
[be112c737b88494096c6e253ddde499b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9cc9cb6475f849b79e4ef6cdfbfcd937.png
[18351e6850894e1ea88a14d179d55afa.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/1a8f0c00eeb04a2ea72f3f14d94e07ea.png
[837845dfff504785ac3e810bf0c0d97d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/617f72e6b7544047926c123ae2d6f7a9.png
[f66cdb9fdd50413899b424a69905faa3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/dba0a0e3b2694a7b8f90697acd7e0a1b.png
[450afe612d814939b33d504c95bda567.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/9579b18503b34bc9988e5252bf9abd74.png
[10a28af7b249483f883f7c3a93594f41.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/993b48d9c39e4ba3a168f813051eb99f.png
[8c5e0e7f7c0b4de1b295b6ed8c1162c6.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4c97043ae038411087353a9f9effe36a.png
[eda45d10fb02406abf145706d912f1c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/aac90923b5e945cc9efd60eedd5e93a7.png
[27810a48e0d5422dafb63d856a0516cf.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/2fc6f635ddaa40009efb698960c4f4b1.png
[6123afb49ebf486fb79cbe435ac9e9ee.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/ad322e6c23d240ae9cdef78d60cdafcd.png
[cf6ed0aad0d540c7af61b71d2228e3b2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/e19cf218335e484d9efd639251350804.png
[5e6f267802a6476e9ec08f30fba8b382.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/99fc6335977f4835a072486d3cd2c7b7.png
[907476de74794004b87c824db4397c43.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/7d72bf614bcf4a8ebe77b1277a5d73c2.png
[40d81135f0aa4c17b49e2d3ca3c40651.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/c2b1a97123644ff9bfe15549573c8f75.png
[4e2eb30b55ea4bcd91aeb4d4213adb7c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/21620cbe51574d2cba314d8985f5daec.png
[f64ba7e1fe464ad2ad0db3e865b17f9d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/26/4ea351a3baa24360835ed9ebb336ca5d.png