怎么写一个下面有三个tab标签的移动端的框架。点击底部跳转到指定页。底部是固定的

最新推荐文章于 2022-07-20 18:41:26 发布

肖肖肖丽珠

最新推荐文章于 2022-07-20 18:41:26 发布

阅读量436

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_33769914/article/details/106241637

版权

vue 专栏收录该内容

191 篇文章 5 订阅

订阅专栏

app.vue

<template>

  <div id="app">

    <router-view class="page"></router-view>



    <van-tabbar v-model="active"> //我这里用的vant的框架注意要在main.js里面引入

        <van-tabbar-item icon="home-o">标签1</van-tabbar-item>

        <van-tabbar-item icon="search">标签2</van-tabbar-item>

        <van-tabbar-item icon="friends-o">标签3</van-tabbar-item>

    </van-tabbar>

  </div>

</template>

<script>

export default {

  name: 'App',

  data(){

    return{

      active:0,

    }

  },

  methods:{



  },

  watch:{

    active(val){

       switch(val){

         case 0:this.$router.push({path:'/tab1'});break;

         case 1:this.$router.push({path:'/tab2'});break;

         case 2:this.$router.push({path:'/tab3'});break;

       }

    }

  }

}

</script>

<style>

#app {

  font-family: 'Avenir', Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

路由配置

import Vue from 'vue'

import Router from 'vue-router'

Vue.use(Router)

export default new Router({

  routes: [

    {

      path: '/',

      name: 'app',

      component: resolve => require(['@/App'], resolve),

      children:[

        {  path:'/tab1',

           name:'tab1',

           component: resolve => require(['@/components/tab1'], resolve)

        },{

          path:'/tab2',

          name:'tab2',

          component: resolve => require(['@/components/tab2'], resolve)

     },{

        path:'/tab3',

        name:'tab3',

        component: resolve => require(['@/components/tab3'], resolve)

     },

     {//重定向。进入的时候就是第一个tab1显示

      path: '/',

      redirect: '/tab1'

    }

      ]

    },



  ]

})

main.js

import Vue from 'vue'

import App from './App'

import router from './router'

// 引入vant框架

import Vant from 'vant';

import 'vant/lib/index.css';

Vue.use(Vant);

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})