您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue-router怎么實現組件切換功能”,在日常操作中,相信很多人在vue-router怎么實現組件切換功能問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue-router怎么實現組件切換功能”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
首先,在實現這個需求之前,我們先分析或者回想下和自己做過的demo中哪個類似,相信很多朋友立馬就會想起來---tab欄切換,那么對于HTML結構的設計我們便可以借助tab欄切換的結構:一個大盒子套著兩個小盒子,一個作容器,另一個作導航!
HTML 結構
<div> <div>容器</div> <div class="footer"> <div class="module-nav"> <div class="nav-i"> <div class="iconfont icon"></div> <h4>首頁</h4> </div> <div class="nav-i"> <div class="iconfont icon"></div> <h4>發現</h4> </div> <div class="nav-i"> <div class="iconfont icon-add"></div> </div> <div class="nav-i"> <div class="iconfont icon"></div> <h4>消息</h4> </div> <div class="nav-i"> <div class="iconfont icon"></div> <h4>我的</h4> <div> </div> </div> </div>
做完HTML結構的編寫,那我們在給上面的骨架穿上衣服,根據需求“底部固定”,我們很容易便會想到 position: fixed ,當然我這里也是用固定定位實現的,但布局采用的是 flex,在采用 flex 結合固定定位布局的時候常常會出現很多不必要的問題,如:flex 屬性失效,兩者效果沖突等,原因更多的便是“脫標”導致的,其中更多的便是出現在父元素 flex,子元素 position的時候,這時候可以中間加個div使兩者擺脫聯系。
css 樣式( stylus形式 )
.footer position fixed bottom 0 z-index 999 max-width 1080px width 100% border-top 1px solid #C0C0C0 .module-nav display flex justify-content space-around .nav-i width 60px text-align center .icon font-size 35px padding 5px 0 .icon-add font-size 60px h4 font-size 15px font-weight normal margin 0 padding-bottom 5px
骨架和衣服都做好后,那么大概的雛形就出來了,我們的需求也就實現了一半,剩下的便是組件切換了。這個就簡單了,只需要配置下路由表,然后指定跳轉便可以了
路由表
routes: [ { path: "/", name: "home", component: Home }, { path: "/find", name: "find", component: Find }, { path: "/info", name: "info", component: Info }, { path: "/user", name: "user", component: User } ]
最后在“容器”內添加router-view即可,下面可以看看完整代碼:
// HTML <div> <div class="main-content"> <router-view></router-view> </div> <div class="footer"> <div class="module-nav"> <router-link tag="div" to="/" class="nav-i"> <div class="iconfont icon"></div> <h4>首頁</h4> </router-link> <router-link tag="div" to="/find" class="nav-i"> <div class="iconfont icon"></div> <h4>發現</h4> </router-link> <div class="nav-i"> <div class="iconfont icon-add"></div> </div> <router-link tag="div" to="/info" class="nav-i"> <div class="iconfont icon"></div> <h4>消息</h4> </router-link> <router-link tag="div" to="/user" class="nav-i"> <div class="iconfont icon"></div> <h4>我的</h4> </router-link> </div> </div> </div> // css .footer position fixed bottom 0 z-index 999 max-width 1080px width 100% border-top 1px solid #C0C0C0 .module-nav display flex justify-content space-around .nav-i width 60px text-align center .icon font-size 35px padding 5px 0 .icon-add font-size 60px h4 font-size 15px font-weight normal margin 0 padding-bottom 5px // router export default new Router({ routes: [ { path: "/", name: "home", component: Home }, { path: "/find", name: "find", component: Find }, { path: "/info", name: "info", component: Info }, { path: "/user", name: "user", component: User } ] });
到此,關于“vue-router怎么實現組件切換功能”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。