新手入坑: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继续加油!继续采坑