在项目中,我们经常需要将参数拼接到地址栏上,以便请求接口的时候拿到所需要的入参。在vue中,我们可以使用this.$router.replace()方法将我们所需要拼接的参数替换到地址栏上。
记录的使用时遇到的问题
- 使用方法时会加载两次界面,走两次created()挂载期,导致created()里请求的接口请求了两次,导致浏览器请求的负担加重,还会出现一些渲染上的bug。
原因
- 在this.$router.replace()的方法中,我们不能改变里面的拼接内容,所以需要在拼接前加上原有路由,如图
- ` this.$router.replace({
...this.$route,
query: {
...this.$route.query,
index: resp.data.result[0].id,
lookupType: resp.data.result[0].lookupType
}
})`
…this. r o u t e r 与 . . . t h i s . router与...this. router与...this.router.query遍历原有的路由拼接加上地址栏,就可以解决重复加载问题