使用vue做一个“淘宝“项目(显示页面)

显示页面

---

前言：做出底部导航栏

---

目录：

创建项目文件

删除原有文件

引用资源文件

实现底部导航栏

显示页面

做出首页

显示商品栏

做出分类

---

一、若想每个导航栏都能显示页面，那必先创建组件

在 src->views 文件夹下创建四个组件

现在我想用这四个界面，那就必须找到 src->router->index.js 文件来调用这四个组件，下面在 index.js 中写这四行代码 ，若写完是灰色的不需要担心，因为你后面还没有引用，继续往下看

然后下面写成这样，代码如下

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Category from '@/views/Category.vue'
import Cart from '@/views/Cart.vue'
import User from '@/views/User.vue'

Vue.use(VueRouter)

const routes = [
  {
    path:"/",
    redirect:'/home'  //重定向首页
  },
  {
    name:'home',
    path:'/home',
    component:Home
  },
  {
    name:'Category',
    path:'/category',
    component: Category
  },
  {
    name:'cart',
    path:'/cart',
    component:Cart
  },
  {
    name:'User',
    path:'/user',
    component:User
  }
]



const router = new VueRouter({
  routes
})

export default router

不了解重定向的点这里

二、添加视图容器
在 App.vue 中添加视图容器标签 router-view

三、在非路由组件中添加路由模式
在vant文档中的路由模式是
标签栏支持路由模式，用于搭配 vue-router 使用。路由模式下会匹配页面路径和标签的 to 属性，并自动选中对应的标签。
找到 src->components->Tabbar.vue 下创建路由模式，代码如下

<template>
   <!--跟标记-->
   <div>
      <!--引用Vant-Tabbar组件-->
      <van-tabbar v-model="active">

         <van-tabbar-item v-for="tab in tabs"
                          :icon="tab.icon"
                          :key="tab.name"
                          :to="tab.path">{{tab.name}}</van-tabbar-item>

      </van-tabbar>
   </div>
</template>

<script>
   export default {
      name: "Tabbar",
      data(){
         return{
            active:0,
            tabs:[
               {
                  name:'精选',
                  icon:'compass-full',
                  path:'/home',
               },
               {
                  name:'分类',
                  icon:'class-full',
                  path:'/category',
               },
               {
                  name:'购物车',
                  icon:'cart-full',
                  path:'/cart',
               },
               {
                  name:'我的',
                  icon:'wode',
                  path:'/user',
               }

            ]
         }
      }
   }
</script>

<style scoped>

</style>

写完之后就实现了点击导航栏实现页面，若是空白的话，去把那四个组件中的 templated->div 标签下输入一些文字试试

下一篇文章我们来做出首页，也就是下面这样

---

上一篇:实现底部导航栏
下一篇:写出首页

---

推荐BGM:Never Going Home