写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参数文章来源:https://www.toymoban.com/news/detail-575044.html
created() {
console.log("this.$route--->", this.$route);
// 方式二:跳转路由时不带query参数
this.$router.push(this.$route.path);
}
最终页面效果如下所示。可以看到,路径没有显示成http://localhost:8080/cinemas?hello=vue,而是显示成http://localhost:8080/cinemas,这就是我们要的效果。文章来源地址https://www.toymoban.com/news/detail-575044.html
到了这里,关于vue使用路由的query配置项时如何清除地址栏的参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!