安裝 Mint UIvue
cnpm install mint-ui --savevue-router
若是你的項目會用到 Mint UI 裏較多的組件,最簡單的方法就是把它們所有引入。此時須要在入口文件 main.js 中:npm
本身以爲mint-ui的文件介紹不是很詳細,簡單介紹一下我遇到的問題吧!app
1.Swipe 輪播圖:記得必定要給個高度ide
<!--輪播圖--> <div class="page-swipe"> <mt-swipe :auto="4000" :show-indicators="true"> <mt-swipe-item :class="{slide1:true}"></mt-swipe-item> <mt-swipe-item :class="{slide2:true}"></mt-swipe-item> <mt-swipe-item :class="{slide3:true}"></mt-swipe-item> </mt-swipe> </div>
.page-swipe .mint-swipe{ height:100px; color:#fff; font-size:30px; text-align:center; } .page-swipe .mint-swipe-item{ line-height:100px; }
底部導航切換問題字體
我製作成了字體圖標(製做地址:https://icomoon.io/),這是一個公用組件,點擊切換類,讓我頭疼的是,首頁按鈕圖標默認是選中的類,這樣就形成頁面一刷新,還原默認選中現狀,這是不合理的。ui
想來想去,他們都有各自的index值,最後加了一個本地存儲indexthis
修改20170830,底部導航最後換了一種更加簡潔的方法,以下圖url
在路由js文件裏配置selectedspa
在tabbar文件中
路由切換,vue-router
cnpm install vue-router --save
<router-link to="/Index"></router-link>
在main.js裏
import router from './router/router.config.js' new Vue({ el:'#app', router, rects, store:store, template:'<App/>', components:{App} })
在router.config.js裏
想強調一下的是紅色框內的,在路由切換時遇到上一頁滑動到頁面一半,同時切換到下一個路由,下一個頁面也停留在中間,看到的並非頁面的頂部內容,這也是不合理的,緣由是路由默認是hash模式(本身百度他們二者的區別)。
接下來就涉及帶參數的路由了
一、顯示在url中
params傳值是經過 :[參數值] 如path: "/ListContent/:id"
<router-link :to="{ name: 'ListContent', params: { id: list.id }}"></router-link>
如:http://hd.com/ListContent/79
經過 this.$route.params.參數名來接受傳遞過來的值
20171212補充:
params:/router1/:id ,/router1/123,/router1/789 ,這裏的id叫作params
query:/router1?id=123 ,/router1?id=456 ,這裏的id叫作query。
router.js:
路由設置這裏,當你使用params方法傳參的時候,要在路由後面加參數名,而且傳參的時候,參數名要跟路由後面設置的參數名對應。使用query方法,就沒有這種限制,直接在跳轉裏面用就能夠。
注意:若是路由上面不寫參數,也是能夠傳過去的,但不會在url上面顯示出你的參數,而且當你跳到別的頁面或者刷新頁面的時候參數會丟失,那依賴這個參數的http請求或者其餘操做就會失敗。
<router-link :to="{ name:'router1',params: { id: status ,id2: status3},query: { queryId: status2 }}" > router-link跳轉router1 </router-link>
一、params是路由的一部分,必需要有。query是拼接在url後面的參數,沒有也不要緊。
二、params、query不設置也能夠傳參,params不設置的時候,刷新頁面或者返回參數會丟失。