用vue對tabbar的封裝

2022-08-28 20:57:10 字數 1192 閱讀 9718

這是要做成寫封裝效果,

這個重點就是要學會router的用法,用router進行各個頁面的跳轉,(這裡的跳轉不是說真跳轉了,而是url拼接了個路徑。然後js**讀到這個路徑,去做對應的頁面展示)

這是檔案路徑,

首先我們來看看router裡面的index.vue**

1 import vue from 'vue'

2 import vuerouter from 'vue-router'

//懶載入

3 const home = () => import('../views/home/home')

4 const category = () => import('../views/category/category')

5 const file = () => import('../views/file/file')

6 const cart = () => import('../views/cart/cart')7//

安裝外掛程式ue

8vue.use(vuerouter)9//

建立路由物件

10 const routes =[11,

15,19,

23,27,

31]32 const router = new

vuerouter()

36//

匯出37 export default router

這裡採用的懶載入(將不同的路由對應的元件分割成不同的**塊,然後當路由被訪問的時候才載入對應的元件這樣就更加高效了)

然後是tabbar.vue這裡面採用的預留插槽,這樣使別人用起來更加的方便,可以新增不同的樣式,

123

456712

1329

然後是tabbaritem.vue裡面的**

123

if="!isactive">

4else> 56

7 89

1041

依舊是插槽,然後顏色和路由位址是從外部元件傳進來的

vue簡單 tabbar封裝

tabbar.vue tabbaritem.vue 分類 購物車 我的 路由的index.js import vue from vue 1 引入路由 import router from vue router 2 使用路由 vue.use router 解決路由兩次點選報錯 const vuerou...

封裝的底部tabbar導航

lang en charset utf 8 首頁title src script name viewport content width device width,initial scale 1.0,maximum scale 1.0,user scalable no head tabbar ind...

用vue元件封裝todolist

用vue元件封裝todolist cssbody header section label header input input focus h2span ol,ul li input pli p input li p input.editer liol li ul li li a footer f...