Vue路由跳转传参后无法清空地址栏参数问题解决方案

Vue路由跳转传参后无法清空地址栏参数问题解决

使用的路由模式是history，通过以下方式进行跳转传参

proxy.$router.push({ path: '/performance/index', query: { name: '小明', id: '1'} })

这样跳转后路由和地址栏将变成 /performance/index?name=小明&id=1
因为页面有用到路由参数，但是这样刷新的话，参数会一直携带在路由上，就会刷新了页面还会处理这些参数。
刚开始，通过proxy.$route.quey = {} ，proxy.$route.quey = null，proxy.$router.push({ path: '/performance/index'})方法尝试过，路由参数确实没了，但是地址栏上还是会携带参数，最后通过网上查阅找到了解决办法：

 const path = proxy.$route.path
 proxy.$router.push(path)

补充：vue使用路由的query配置项时如何清除地址栏的参数

vue使用路由的query配置项时如何清除地址栏的参数

写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，这就是我们要的效果。

到此这篇关于Vue路由跳转传参后无法清空地址栏参数问题解决的文章就介绍到这了,更多相关Vue路由跳转传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！