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: {} });
}解決方案二：跳轉(zhuǎn)路由時不帶query參數(shù)
created() {
console.log("this.$route--->", this.$route);
// 方式二：跳轉(zhuǎn)路由時不帶query參數(shù)
this.$router.push(this.$route.path);
}最終頁面效果如下所示?？梢钥吹?，路徑?jīng)]有顯示成http://localhost:8080/cinemas?hello=vue，而是顯示成http://localhost:8080/cinemas，這就是我們要的效果。
到此這篇關(guān)于vue使用路由的query配置項時如何清除地址欄的參數(shù)的文章就介紹到這了,更多相關(guān)vue清除地址欄的參數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue Element前端應用開發(fā)之動態(tài)菜單和路由的關(guān)聯(lián)處理
這篇文章主要介紹了Vue Element前端應用開發(fā)之動態(tài)菜單和路由的關(guān)聯(lián)處理，對vue感興趣的同學，可以參考下2021-05-05
這篇文章主要介紹了mpvue 如何使用騰訊視頻插件的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
表格Table實現(xiàn)前端全選所有功能方案示例(包含非當前頁)
這篇文章主要為大家介紹了表格Table實現(xiàn)前端全選所有功能,包括非當前頁的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2024-02-02
這篇文章主要介紹了Vuex給state中的對象新添加屬性遇到的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了Vue中子組件的顯示與隱藏方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
Vue-CLI 3.X 部署項目至生產(chǎn)服務器的方法
這篇文章主要介紹了Vue-CLI 3.X 部署項目至生產(chǎn)服務器的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要介紹了基于Vue.js+Nuxt開發(fā)自定義彈出層組件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
今天在做vue和springboot交互的一個項目的時候，想要基于前端實現(xiàn)一些只有登錄驗證之后才能訪問某些頁面的操作，所以在這里總結(jié)一下實現(xiàn)該功能的一個解決方案2021-10-10
這篇文章主要為大家詳細介紹了vue?extend+promise封裝全局彈窗組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue Element校驗validate的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09