vue,一路走來(2)--路由vue-router

 安裝 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、query是什麼?

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不設置的時候,刷新頁面或者返回參數會丟失。

相關文章
相關標籤/搜索