标签：vue name title tableList import router 页面 模板 icon

日常开发中，经常会遇到一个页面运用多个组件，或者多个页面运用同一组件的需求，对于这种，每个页面都进行引用，就有些过于繁琐，对此，我们会针对此类情况进行统一封装，本篇文章主要实现效果如下图，对于需要使用tabbar的页面增加配置：

一：新建组件TabBar

此处引用了vant组件

import { Tabbar, TabbarItem } from 'vant';
import styles from './index.css'
export default {
  name: 'tabBar',
  mixins: [],
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  },
  data() {
    return {
      active: 0,
      tableList: [
        {title: '首页', icon: 'home-o', jumpUrl: '/home'},
        {title: '列表', icon: 'search', jumpUrl: '/list'},
        {title: '购物车', icon: 'friends-o', jumpUrl: '/cart'},
        {title: '我的', icon: 'setting-o',jumpUrl: '/mine'},
      ]
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  destroyed() {
  },
  methods: {},
  render () {
    let {tableList, active} = this
      return (
      <div class={styles['tabBar']}>
         <van-tabbar v-model={active}>
           {tableList && tableList.length && tableList.map(item => {
            return <van-tabbar-item icon={item.icon}>{item.title}</van-tabbar-item>
           })}
         </van-tabbar>
      </div>
    )
  }
}

二：在router中引入

import TabBar from '@/components/TabBar/index.js'
import Login from '@/views/login.vue'

  {
    path: '/login',
    name: 'login',
    meta: {
      name: '登录'
    },
    components: {
      default: Login,
      tabbar: TabBar // 需要增加的板块添加
    },
  },

三：在App.vue中配置

    <router-view name="tabbar"></router-view>

至此，配置完成。

标签：vue,name,title,tableList,import,router,页面,模板,icon
来源： https://blog.csdn.net/duanhy_love/article/details/122740239

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。