vue-router多个组件模板放入同一个页面中

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