新手入坑:Vue-router+Mint-ui路由採坑記之router-view不知道放在哪裏?作得不對請指教!

時間 2019-12-05

標籤新手 vue router+mint router mint 路由 view 不知道放在哪裏作得不對指教欄目系統網絡简体版

原文原文鏈接

從Mint ui組件庫複製過來的tabbar相關的代碼,代碼以下:

<mt-tabbar v-model="selected">
  <mt-tab-item id="外賣">
    <img slot="icon" src="../assets/100x100.png">
    外賣
  </mt-tab-item>
  <mt-tab-item id="訂單">
    <img slot="icon" src="../assets/100x100.png">
    訂單
  </mt-tab-item>
  <mt-tab-item id="發現">
    <img slot="icon" src="../assets/100x100.png">
    發現
  </mt-tab-item>
  <mt-tab-item id="個人">
    <img slot="icon" src="../assets/100x100.png">
    個人
  </mt-tab-item>
</mt-tabbar>
複製代碼

按照常規作法,咱們如今這四個mt-tab-item 表現搞個router-link,路由跳轉,可是,api好像彷佛沒有相關路由信息,像其餘Vant ui中,tabbar是有路由的api參數的,但是mint-ui沒有,api截圖以下:vue

其實他是經過綁定個v-model="selected",而後和mt-tab-item標籤上的id去匹配,而後顯示相應的div,這個方法我試過,能實現效果,可是到後面我要去搞嵌套路由,會很是噁心,異常噁心,噁心到我要轉行,真的!由於我後面匹配的路由 router-view不知道放在哪裏,而後我又百度,看了vue-router的官網,發現了有個方法以下:vue-router

this.$router.push({
    path:'/你想要的路徑'
})
複製代碼

此方法就相似數組的push方法api

有了這個push方法我怎麼去添加路由呢?

一開始我用router-link標籤在每個mt-tab-item外面包一層,發現並不靠譜,錯誤的作法,而後經過js去綁定解決的,可是我怎麼去綁定這個路由呢?若是寫在method裏面,我怎麼去拿路由?通常method方法是寫業務邏輯,而後computed是對數值的運算,接下來就是咱們的watch登場了,watch方法通常用來搞看不見的東西,好比路由就是看不見的,因此開門見山了,代碼以下:數組

<template>
  <div id="app">
    <!-- 頂部 -->
      <mt-header fixed title="DJ商城"></mt-header>
    <!-- 中間內容 -->
      <div class="middleContainter">
          <router-view></router-view>
      </div>

<!-- 底部nav -->
      <mt-tabbar v-model="selected" >
            <mt-tab-item id="c1">
              <span slot="icon" class="iconfont icon-home"></span>
              首頁
            </mt-tab-item>
            <mt-tab-item id="c2">
            <span slot="icon" class="iconfont icon-user"></span>
              會員
            </mt-tab-item>
          <mt-tab-item class="iconfa" id="c3">
             <mt-badge size="small" type="error" class="iconson">30</mt-badge>
              <span slot="icon" class="iconfont icon-sound"></span>
            購物車
          </mt-tab-item>
        <mt-tab-item id="c4">
          <span slot="icon" class="iconfont icon-search"></span>
          搜索
        </mt-tab-item>  
           
      </mt-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selected:'c1',
    }
  },
  watch:{
      selected(newval,oldval){
        console.log(newval+"------"+oldval);
        switch (newval) {
          case 'c1':
            this.$router.push({
              path:'/home'
            })
            break;
          case 'c2':
            this.$router.push({
              path:'/vip'
            })
            break;
          case 'c3':
            this.$router.push({
              path:'/cart'
            })
            break;
          case 'c4':     
            this.$router.push({
              path:'/search'
            })
            break;
        }
      }
  }

  }

</script>

<style>

</style>


複製代碼

在watch中方法能夠有兩個參數,用來記錄新的值,和舊的值,那麼咱們拿到新值就能夠路由匹配了,是否是很棒呢?效果圖以下bash

最關鍵的來了 :咱們要去陪路由了,要和咱們剛剛push方法裏面的path要同樣: router.js 部分代碼以下:

export default new Router({
  routes: [

      {
        path:'/',
        redirect:'/home'
      },
      {
        path:'/home',
        name:'homeContainter',
        component:homeContainter,
      
      },
      {
        path:'/vip',
        name:'vipContainter',
        component:vipContainter
        
      },
      {
          path:'/cart',
          name:'cartContainer',
          component:cartContainer
      },
      {
        path:'/search',
        name:'searchContainer',
        component:searchContainer
      },
      {
        path:'/home/news',
        component:news
      }
      
  ]
})

複製代碼