vue使用路由的query配置項(xiàng)時(shí)清除地址欄的參數(shù)案例詳解
寫(xiě)vue項(xiàng)目時(shí)，如果想通過(guò)路由的query配置項(xiàng)把參數(shù)從一個(gè)組件傳到另一個(gè)組件，但是又不希望?id=xxx顯示在地址欄（如：http://localhost:8080/test?id=xxx的?id=xxx），該怎么做：
舉一個(gè)案例：
把Movies.vue的hello參數(shù)傳到Cinemas.vue
在Movies.vue寫(xiě)：
this.$router.push({
name: 'cinemas',
query: {
hello: 'vue'
}
})在Cinemas.vue寫(xiě)：
解決方案一：清空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);
}最終頁(yè)面效果如下所示?？梢钥吹剑窂?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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解
這篇文章主要介紹了Vue微信項(xiàng)目按需授權(quán)登錄策略實(shí)踐思路詳解,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-05-05
element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)
本文主要介紹了element中el-table中的el-input校驗(yàn)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
安裝vue3開(kāi)發(fā)者工具但控制臺(tái)沒(méi)有顯示出vue選項(xiàng)的解決
這篇文章主要介紹了安裝vue3開(kāi)發(fā)者工具但控制臺(tái)沒(méi)有顯示出vue選項(xiàng)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了淺談Vue.use到底是什么鬼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
vuex中遇到的坑,vuex數(shù)據(jù)改變,組件中頁(yè)面不渲染操作
這篇文章主要介紹了vuex中遇到的坑,vuex數(shù)據(jù)改變,組件中頁(yè)面不渲染操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
這篇文章主要介紹了Vue的組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-10-10
Nginx部署Vue.js前端項(xiàng)目的實(shí)現(xiàn)
本文主要介紹了Nginx部署Vue.js前端項(xiàng)目指南,幫助您實(shí)現(xiàn)從開(kāi)發(fā)到線上部署的平滑過(guò)渡,確保用戶能夠獲得最佳的訪問(wèn)體驗(yàn),感興趣的可以了解一下2024-09-09
這篇文章主要介紹了Vue實(shí)現(xiàn)剪貼板復(fù)制功能,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
Vue通過(guò)異步隊(duì)列批量處理數(shù)據(jù)變化與DOM更新,減少性能損耗；使用$nextTick獲取更新后的DOM；異步請(qǐng)求需處理加載狀態(tài)；生命周期鉤子內(nèi)可包含異步操作；核心原理為依賴收集→去重→微任務(wù)延遲→批量更新,確保高效響應(yīng)2025-08-08
vue-router 路由傳參問(wèn)題(路由傳參方式)
路由傳參主要有兩種方式一種是路徑傳參一種是參數(shù)傳遞,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11