vue簡單 tabbar封裝

2022-07-15 11:00:25 字數 951 閱讀 3928

tabbar.vue

​​

tabbaritem.vue

​​​

分類      

購物車      

我的    

​​路由的index.js

import vue from 'vue'

//1、 引入路由

import router from 'vue-router'

//2、 使用路由

vue.use(router)

// 解決路由兩次點選報錯

const vuerouterpush = router.prototype.push

router.prototype.push = function push(to)

// 懶載入路由

const home = () => import("../views/home/home.vue")

const category = () => import("../views/category/category.vue")

const shopcart = () => import("../views/shopcart/shopcart.vue")

const profile = () => import("../views/profile/profile.vue")

//5、 一般把路由定義相關的抽離出來

const routes = [

, ,

, , ]

//3、 建立路由物件

const router = new router()

//4、 匯出路由

用vue對tabbar的封裝

這是要做成寫封裝效果,這個重點就是要學會router的用法,用router進行各個頁面的跳轉,這裡的跳轉不是說真跳轉了,而是url拼接了個路徑。然後js 讀到這個路徑,去做對應的頁面展示 這是檔案路徑,首先我們來看看router裡面的index.vue 1 import vue from vue 2...

vue簡單封裝axios

1 在src下新建api資料夾,在api資料夾下新建config.js檔案 2 config.js配置如下 import axios from axios import qs from qs mint ui 框架,若不需要請全部注釋掉 import from mint ui axios.defaul...

封裝的底部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...