顯示頁面

---

前言：做出底部導航欄

---

目錄：

創建項目文件

刪除原有文件

引用資源文件

實現底部導航欄

顯示頁面

做出首頁

顯示商品欄

做出分類

---

一、若想每個導航欄都能顯示頁面，那必先創建組件

在 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

總結

以上是生活随笔為你收集整理的使用vue做一个“淘宝“项目(显示页面)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。