网站建设与设计试题,郑州新闻,昆明网站排名优化报价,哈尔滨网站建设效果写vue项目时#xff0c;如果想通过路由的query配置项把参数从一个组件传到另一个组件#xff0c;但是又不希望?idxxx显示在地址栏#xff08;如#xff1a;http://localhost:8080/test?idxxx的?idxxx#xff09;#xff0c;该怎么做#xff1a; 举一个案例#xff1… 写vue项目时如果想通过路由的query配置项把参数从一个组件传到另一个组件但是又不希望?idxxx显示在地址栏如http://localhost:8080/test?idxxx的?idxxx该怎么做 举一个案例 把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?hellovue而是显示成http://localhost:8080/cinemas这就是我们要的效果。 ⚠️但这又会产生一个问题如果是移动端项目还好如果是pc端项目当用户点击浏览器地址栏旁的返回箭头时第一次点击会显示http://localhost:8080/cinemas?hellovue这个路径第二次点击才显示回Movies.vue很明显这又不是我们想要的效果我们想要的效果是第一次点击就显示回Movies.vue。 解决方案当触发popState事件时跳转到Movies.vue问题解决。 created() {this.$router.push(this.$route.path);// 当history对象发生变化时,就会触发popState事件window.addEventListener(popstate, () {this.$router.push(/movies);});}
