做网站甘特图 内容东莞做网站推广

写vue项目时，如果想通过路由的query配置项把参数从一个组件传到另一个组件，但是又不希望?id=xxx显示在地址栏（如：http://localhost:8080/test?id=xxx的?id=xxx），该怎么做：

举一个案例：

把Movies.vue的hello参数传到Cinemas.vue

在Movies.vue写：

 this.$router.push({name: 'cinemas',query: {hello: 'vue'}
})

在Cinemas.vue写：

解决方案一：清空query的值

created() {console.log("this.$route--->", this.$route);// 方式一：清空query的值this.$router.push({ query: {} });
}

解决方案二：跳转路由时不带query参数

created() {console.log("this.$route--->", this.$route);// 方式二：跳转路由时不带query参数this.$router.push(this.$route.path);
}

最终页面效果如下所示。可以看到，路径没有显示成http://localhost:8080/cinemas?hello=vue，而是显示成http://localhost:8080/cinemas，这就是我们要的效果。

⚠️但这又会产生一个问题，如果是移动端项目还好，如果是pc端项目，当用户点击浏览器地址栏旁的返回箭头时，第一次点击会显示http://localhost:8080/cinemas?hello=vue这个路径，第二次点击才显示回Movies.vue，很明显，这又不是我们想要的效果，我们想要的效果是第一次点击就显示回Movies.vue。

解决方案：当触发popState事件时，跳转到Movies.vue，问题解决。

 created() {this.$router.push(this.$route.path);// 当history对象发生变化时,就会触发popState事件window.addEventListener("popstate", () => {this.$router.push('/movies');});}