新手入坑:Vue-router+Mint-ui路由采坑记之router-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截图以下:

其实他是经过绑定个v-model="selected",而后和mt-tab-item标签上的id去匹配,而后显示相应的div,这个方法我试过,能实现效果,可是到后面我要去搞嵌套路由,会很是恶心,异常恶心,恶心到我要转行,真的!由于我后面匹配的路由 router-view不知道放在哪里,而后我又百度,看了vue-router的官网,发现了有个方法以下:

this.$router.push({
    path:'/你想要的路径'
})
复制代码

此方法就相似数组的push方法

有了这个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中 方法能够有两个参数,用来记录新的值,和旧的值,那么咱们拿到新值就能够路由匹配了,是否是很棒呢?效果图以下

最关键的来了 :咱们要去陪路由了,要和咱们刚刚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
      }
      
  ]
})

复制代码

匹配完毕,不要在app.vue中间加个坑(router-view)来展现你的路由!

若是写的不对,请指正,若是看不懂,请留言,我看到必会回复,2019继续加油!继续采坑