配置路由

 

<!-- 底部导航栏区域 -->
<mt-tabbar v-model="selected">
  <!-- id属性代表命名路由 -->
  <mt-tab-item id="home">
    <img slot="icon" src="./assets/index.jpg" />
      首页
   </mt-tab-item>
   <mt-tab-item id="vip">
     <img slot="icon" src="./assets/vip.jpg" />
       会员
     </mt-tab-item>
   <mt-tab-item id="shopcart">
    <img slot="icon" src="./assets/shopcart.jpg" />
        购物车
    </mt-tab-item>
    <mt-tab-item id="search">
     <img slot="icon" src="./assets/search.jpg" />
       查找
     </mt-tab-item>
    </mt-tabbar>

  watch: {
    selected(newValue,oldValue ) {
      // newValue 就是对应id 值
      console.log(newValue,oldValue, 111111)
      console.log(this.selected)
      this.$router.push({ name: this.selected })
    }
  }

const newRouter = new Router({
  // 匹配路由规则
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    }
  ]
})

export default newRouter

// 引入组件
import Home from '@/components/Home/Home'

最后：  在component: 组件中创建首页组件即可