關于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題
更新時間：2020年01月16日 10:50:49 作者：8戰(zhàn)魂無雙8
這篇文章主要介紹了關于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
首先在store中定義所需要的變量可以進行初始化，再定義一個方法，登錄成功后A頁面，跳轉(zhuǎn)到B頁面之前，需要直接調(diào)用store中存儲數(shù)據(jù)的方法，全局可以使用
諸如以上所示，該問題，百度了好久，多虧群里大佬。
vue使用less報錯的解決方法 安裝less less-loader
cnpm install less less-loader --save-dev
app.vue是所有XXX.vue文件的根文件
所以webapp,的底部通常是在這里配置
h5的新增
<header>標題</header>
<main>主題內(nèi)容</main>
<footer>固定的底部內(nèi)容</footer>
所以底部通常不使用footer
元素在最底部水平排列
<div class="myfooterbox">
<div>外賣</div>
<div>搜索</div>
<div>訂單</div>
<div>我的</div>
</div>
.myfooterbox {
width: 100%;
display: flex;
justify-content: space-between;
position: fixed;
bottom: 0;
left: 0;
}
ps==>如果元素的寬度是自身的寬度。
justify-content: space-between;可能是是沒有效果的。
點擊路由跳轉(zhuǎn)
this.$router.push({ path: "/search" });
給當前點擊的元素添加背景色 同樣是借助三目運算 如果是true 添加某一個類
.on {
background: pink;
}
<div @click="handlersell" :class="{ on: '/' === $route.path }">外賣</div>
<div @click="handlersearch" :class="{ on: '/search' === $route.path }">搜索</div>
路由跳轉(zhuǎn)
<div @click="handlersell" :class="{ on: '/' === $route.path }">外賣</div>
<div @click="handlersearch" :class="{ on: '/search' === $route.path }">搜所 </div>
methods: {
handlersell() {
this.$router.push({ path: "/" });
},
handlersearch() {
this.$router.push({ path: "/search" });
},
}
優(yōu)化后 使用了replace
<div @click="handlergo('/')" :class="{ on: '/' === $route.path }">外賣</div>
<div @click="handlergo('/search')" :class="{ on: '/search' === $route.path }" >搜索</div>
handlergo(path) {
this.$router.replace(path);
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
我們知道使用webpack打包vue項目后會生成一個dist文件夾,dist文件夾下有html文件和其他css、js以及圖片等,那么打包后的文件該如何正確運行呢?這篇文章主要給大家介紹了關于vue打包之后的dist文件如何運行的相關資料,需要的朋友可以參考下2023-05-05
關于element-ui中el-form自定義驗證(調(diào)用后端接口)
這篇文章主要介紹了關于element-ui中el-form自定義驗證(調(diào)用后端接口)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結
這篇文章主要介紹了詳解Vue 數(shù)據(jù)更新了但頁面沒有更新的 7 種情況匯總及延伸總結，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
這篇文章主要為大家詳細介紹了vue項目實現(xiàn)添加圖片裁剪組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
使用webstorm配置vue+element開發(fā)環(huán)境
這篇文章主要介紹了使用webstorm配置vue+element開發(fā)環(huán)境，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vite中使用Ant?Design?Vue3.x框架教程示例
這篇文章主要為大家介紹了Vite中使用Ant?Design?Vue3.x框架教程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要介紹了vue-cli3 DllPlugin 提取公用庫 ,需要的朋友可以參考下2019-04-04
Vue中進行數(shù)據(jù)篩選與搜索功能實現(xiàn)常用的方法
表格常用功能經(jīng)常有字段篩選、更多字段篩選彈框來過濾出我們所需要的數(shù)據(jù),下面這篇文章主要給大家介紹了關于Vue中進行數(shù)據(jù)篩選與搜索功能實現(xiàn)常用的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue 開發(fā)之路由配置方法,結合實例形式詳細分析了了vue.js路由原理、配置方法及相關操作注意事項,需要的朋友可以參考下2019-12-12
這篇文章主要給大家介紹了關于vue中跳轉(zhuǎn)界面的3種實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07