關(guān)于vue3.0中的this.$router.replace({ path: '/'})刷新無效果問題
首先在store中定義所需要的變量可以進(jìn)行初始化，再定義一個(gè)方法，登錄成功后A頁面，跳轉(zhuǎn)到B頁面之前，需要直接調(diào)用store中存儲(chǔ)數(shù)據(jù)的方法，全局可以使用
諸如以上所示，該問題，百度了好久，多虧群里大佬。
vue使用less報(bào)錯(cuò)的解決方法 安裝less less-loader
cnpm install less less-loader --save-dev
app.vue是所有XXX.vue文件的根文件
所以webapp,的底部通常是在這里配置
h5的新增
<header>標(biāo)題</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;可能是是沒有效果的。
點(diǎn)擊路由跳轉(zhuǎn)
this.$router.push({ path: "/search" });
給當(dāng)前點(diǎn)擊的元素添加背景色 同樣是借助三目運(yùn)算 如果是true 添加某一個(gè)類
.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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue使用Element-UI實(shí)現(xiàn)分頁效果全過程
element-ui官網(wǎng)上有分頁實(shí)現(xiàn)的功能,簡單方便又好用,也有很多分頁的樣式,你可以根據(jù)需要去選擇自己想要的樣式,下面這篇文章主要給大家介紹了關(guān)于Vue使用Element-UI實(shí)現(xiàn)分頁效果的相關(guān)資料,需要的朋友可以參考下2023-04-04
這篇文章主要為大家介紹了Vue組件的創(chuàng)建和使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析)
這篇文章主要介紹了Vue項(xiàng)目引用百度地圖并實(shí)現(xiàn)搜索定位等功能(案例分析),本篇文章為案例分析，技術(shù)點(diǎn)較多，所以篇幅較長，認(rèn)真閱覽的你一定會(huì)學(xué)到很多知識(shí)，需要的朋友可以參考下2022-09-09
本篇文章主要介紹了vue 掛載路由到頭部導(dǎo)航的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁面-計(jì)算頁面尺寸
這篇文章主要介紹了Vue項(xiàng)目如何改變屏幕尺寸重新刷新頁面-計(jì)算頁面尺寸，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue框架提供了前端開發(fā)組件的思想，可以通過組件來組合成一個(gè)完整的頁面，都是隨著組件數(shù)量原來越多，組件之間難免需要相互通信。本文將為大家介紹四種組件間的通信方式，需要的可以參考一下2022-01-01
Vue項(xiàng)目使用localStorage+Vuex保存用戶登錄信息
這篇文章主要為大家詳細(xì)介紹了Vue項(xiàng)目使用localStorage+Vuex保存用戶登錄信息，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
基于Vue實(shí)現(xiàn)后臺(tái)系統(tǒng)權(quán)限控制的示例代碼
本篇文章主要介紹了基于Vue實(shí)現(xiàn)后臺(tái)系統(tǒng)權(quán)限控制的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)點(diǎn)擊目標(biāo)區(qū)域之外可關(guān)閉(隱藏)目標(biāo)區(qū)域，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vue.JS入門教程之自定義指令,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12