欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue使用路由的query配置項時清除地址欄的參數(shù)案例詳解

 更新時間：2023年09月19日 10:38:01   作者：EchoLiner  
這篇文章主要介紹了vue使用路由的query配置項時如何清除地址欄的參數(shù)，本文通過案例給大家分享完美解決方案,需要的朋友可以參考下

寫vue項目時，如果想通過路由的query配置項把參數(shù)從一個組件傳到另一個組件，但是又不希望?id=xxx顯示在地址欄（如：http://localhost:8080/test?id=xxx的?id=xxx），該怎么做：

舉一個案例：

把Movies.vue的hello參數(shù)傳到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參數(shù)

created() {
   console.log("this.$route--->", this.$route);
   // 方式二：跳轉路由時不帶query參數(shù)
   this.$router.push(this.$route.path);
}

最終頁面效果如下所示。可以看到，路徑?jīng)]有顯示成http://localhost:8080/cinemas?hello=vue，而是顯示成http://localhost:8080/cinemas，這就是我們要的效果。

到此這篇關于vue使用路由的query配置項時如何清除地址欄的參數(shù)的文章就介紹到這了,更多相關vue清除地址欄的參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論