Vue路由传递query参数的两种方式

蔚落 2023-09-23 23:49 73阅读 0赞

路由是可以传递参数的，一般使用query进行传参，有两种方式，接下来一一展示

## 案例展示 ##

先编写一个简单的案例

我这里用的一个三级路由

![在这里插入图片描述][86da8427288a416583a562873f81e2ce.png]

这里使用三级路由以及展示路由视图

![在这里插入图片描述][ab559b3715c5480fad86d91f033e4a2d.png]

这样点击就跳转对应的路径了，接下来进行路由跳转的时候传参即可

![在这里插入图片描述][4b75a55ae86b46b19323eac15ce249b5.png]

## 路由传参 ##

### 方式1：字符串传参(不推荐) ###

参数和ajax或axios发送的query参数几乎一致,写法基本和和ajax一致，都是 url?key=value&拼接参数的格式，例如：

<router-link to="/home/message/detail?id=1&title=你好">

![在这里插入图片描述][9fc2f61ecfb044118052d191d588ee35.png]

路径上也会有所体现

![在这里插入图片描述][1d89be6537d14f31bd3edb01f5304ea4.png]

传递完的参数就到$route的query里面，这里我在组件挂载的时候输出了一个vc实例

![在这里插入图片描述][802b9cd401734b2c95b01eff86320dbb.png]

可以在$route的query里面找到参数

![在这里插入图片描述][47626489d98f4ca0ba7d638c37af2ee0.png]

#### 接收路由参数 ####

想要接收使用参数，也直接从$route的query里面获取即可

![在这里插入图片描述][5b4c1a064622455d8fa75783a0c82426.png]

![在这里插入图片描述][81d784b87b544082a15c0f92c79dd7a4.png]

但是现在参数是死的，所以需要从表达式里面传递

#### 表达式错误传参 ####

注意，在使用到表达式传参的场景时，切不可使用下面两种传递方式

这样就会直接当前字符串解析

![在这里插入图片描述][aa9f4f5ecdd14f57b3d7d63df50755f5.png]

![在这里插入图片描述][6f0b4186888e4bfdb59e0ec99065cb23.png]

也不可以直接使用:to的方式，这样会解析成一个表达式，无法识别报错

![在这里插入图片描述][2de81b4d86044345831d6fc99a1f4c0c.png]

#### 表达式正确传参 ####

正确的做法应该是加上\`\`并且使用$进行拼接传递

![在这里插入图片描述][d0c39aac16164427b2b719154331692d.png]

<router-link :to="`/home/message/detail?id=${msg.id}&title=${msg.title}`">{
        {
        msg.title}}</router-link>

接收参数还是从$route的query里面获取，这样就可以完成使用query方式参数

![在这里插入图片描述][1fcdbcfb511944e89dacabdac8c5778b.png]

但是query这种拼接方式有些复杂，所以有了第二种传参方式，使用对象传参

### 方式2：对象传参(推荐) ###

对象方式进行传参，既然现在to是一个对象，那么有几个属性可以使用

path:想去哪里跳转

query:它是一个对象，在对象里面配置参数

<router-link :to="{
        
             path:'/home/message/detail',
              query:{
        id:msg.id,title:msg.title}
     }">

这种写法清晰明了，推荐使用

## 总结 ##

1 传递参数

<router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link>
                                    
    
    <router-link 
            :to="{
        
                    path:'/home/message/detail',
                    query:{
        
                       id:666,
                title:'你好'
                    }
            }"
    >跳转</router-link>

2 接收参数

$route.query.id
    $route.query.title

[86da8427288a416583a562873f81e2ce.png]: https://img-blog.csdnimg.cn/86da8427288a416583a562873f81e2ce.png
[ab559b3715c5480fad86d91f033e4a2d.png]: https://img-blog.csdnimg.cn/ab559b3715c5480fad86d91f033e4a2d.png
[4b75a55ae86b46b19323eac15ce249b5.png]: https://img-blog.csdnimg.cn/4b75a55ae86b46b19323eac15ce249b5.png
[9fc2f61ecfb044118052d191d588ee35.png]: https://img-blog.csdnimg.cn/9fc2f61ecfb044118052d191d588ee35.png
[1d89be6537d14f31bd3edb01f5304ea4.png]: https://img-blog.csdnimg.cn/1d89be6537d14f31bd3edb01f5304ea4.png
[802b9cd401734b2c95b01eff86320dbb.png]: https://img-blog.csdnimg.cn/802b9cd401734b2c95b01eff86320dbb.png
[47626489d98f4ca0ba7d638c37af2ee0.png]: https://img-blog.csdnimg.cn/47626489d98f4ca0ba7d638c37af2ee0.png
[5b4c1a064622455d8fa75783a0c82426.png]: https://img-blog.csdnimg.cn/5b4c1a064622455d8fa75783a0c82426.png
[81d784b87b544082a15c0f92c79dd7a4.png]: https://img-blog.csdnimg.cn/81d784b87b544082a15c0f92c79dd7a4.png
[aa9f4f5ecdd14f57b3d7d63df50755f5.png]: https://img-blog.csdnimg.cn/aa9f4f5ecdd14f57b3d7d63df50755f5.png
[6f0b4186888e4bfdb59e0ec99065cb23.png]: https://img-blog.csdnimg.cn/6f0b4186888e4bfdb59e0ec99065cb23.png
[2de81b4d86044345831d6fc99a1f4c0c.png]: https://img-blog.csdnimg.cn/2de81b4d86044345831d6fc99a1f4c0c.png
[d0c39aac16164427b2b719154331692d.png]: https://img-blog.csdnimg.cn/d0c39aac16164427b2b719154331692d.png
[1fcdbcfb511944e89dacabdac8c5778b.png]: https://img-blog.csdnimg.cn/1fcdbcfb511944e89dacabdac8c5778b.png