路由拼接的踩坑问题记录_replace路由拼接参数

在项目中，我们经常需要将参数拼接到地址栏上，以便请求接口的时候拿到所需要的入参。在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
                    }
                  })`
1
2
3
4
5
6
7
8

…this.$router与...this.$router.query遍历原有的路由拼接加上地址栏，就可以解决重复加载问题