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