Vue封装一个Tabbar组件带组件路由跳转

最新推荐文章于 2022-10-29 23:30:54 发布

原创

最新推荐文章于 2022-10-29 23:30:54 发布 · 637 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue封装Tabbar组件

话不多说直接上代码
在App.vue 封装路由跳转利用router-view的特性

<template>
  <div id="app">
    <router-view />
    //引入子组件 把items 这个数组传进去
    <Tabr :items="items" />
  </div>
</template>
<script>
import Tabr from "./components/Tabr";
export default {
   
   
  components: {
   
   
    Tabr,
  },
  data() {
   
   
    return {
   
   
      items: [
        {
   
   
          title: "首页",
          path: "/",
          img: require("./assets/img/shouye.png"),
          imgs: require("./assets/img/shouye_1.png"),
        },
        {
   
   
          title: "分类",
          path: "/About",
          img: require("./assets/img/fenlei.png"),
          imgs: require("./assets/img/fenlei_1.png"),
        }