vue-router params与query传参数的区别

喜欢ヅ旅行 2021-09-18 15:38 468阅读 0赞

## vue-router ##

[官方API][API]

##### router.push(location) #####

想要导航到不同的 URL，则使用 `router.push` 方法。这个方法会向`history`栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 `<router-link>` 时，这个方法会在内部调用，所以说，点击 等同于调用 `router.push(…)`。

声明式：`<router-link :to="...">`  
编程式：`router.push(...)`  
该方法的参数可以是一个字符串路径，或者一个描述地址的对象。

// 参数可以是字符串
    this.$router.push('home')
    
    // 参数也可以是个对象
    this.$router.push({ name: 'home'})

**接下来带参数的**

this.$router.push({
    	name: 'home',
    	params: {
    		id: 3.3
    	}
    })
    
    // 接收参数为
    console.log(this.$route.params.id)

**使用params传参数的时候，`this.$router.push（{name: '这里一定要是name', parms: {}}）`因为`params`只能用`name`来引入路由，如果这里写成了`path`，接收参数页面会是`undefined`！！！**

**不知道为什么此方式无效了，本地测试`Route with name 'home' does not exist`**  
版本如图![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yY2VlbA_size_16_color_FFFFFF_t_70]

//query
    
    this.$router.push({
            path: '/home/sheap',
            query: {
              id: 3.2
            }
          })

**使用query传参数的时候，`this.$router.push（{path: '这里一定要是path', query: {}}）`因为`query`只能用`path`来引入路由，如果这里写成了`name`，接收参数页面会是`http://localhost:8080/?id=3.2`亲测！！！**  
**重点在于， push的时候是`router`。 接收的时候用的是`route`一定要看清楚！！！**

#### replace ####

类型: boolean  
默认值: false  
设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，于是导航后不会留下 history 记录。即使点击返回按钮也不会回到这个页面。

//加上replace: true后，它不会向 history 添加新记录，
    //而是跟它的方法名一样 —— 替换掉当前的 history 记录。
    
    this.$router.push({path: '/home', replace: true})
    //如果是声明式就是像下面这样写：
    <router-link :to="..." replace></router-link>
    // 编程式:
    router.replace(...)

参考：[https://segmentfault.com/a/1190000012735168][https_segmentfault.com_a_1190000012735168]  
[https://blog.csdn.net/qq\_30114149/article/details/78416457][https_blog.csdn.net_qq_30114149_article_details_78416457]

[API]: https://router.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01yY2VlbA_size_16_color_FFFFFF_t_70]: /images/20210812/d23756d366c1405d8b504e63627bf3f2.png
[https_segmentfault.com_a_1190000012735168]: https://segmentfault.com/a/1190000012735168
[https_blog.csdn.net_qq_30114149_article_details_78416457]: https://blog.csdn.net/qq_30114149/article/details/78416457