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