顯示頁(yè)面

---

前言：做出底部導(dǎo)航欄

---

目錄：

創(chuàng)建項(xiàng)目文件

刪除原有文件

引用資源文件

實(shí)現(xiàn)底部導(dǎo)航欄

顯示頁(yè)面

做出首頁(yè)

顯示商品欄

做出分類

---

一、若想每個(gè)導(dǎo)航欄都能顯示頁(yè)面，那必先創(chuàng)建組件

在 src->views 文件夾下創(chuàng)建四個(gè)組件

現(xiàn)在我想用這四個(gè)界面，那就必須找到 src->router->index.js 文件來(lái)調(diào)用這四個(gè)組件，下面在 index.js 中寫(xiě)這四行代碼 ，若寫(xiě)完是灰色的不需要擔(dān)心，因?yàn)槟愫竺孢€沒(méi)有引用，繼續(xù)往下看

然后下面寫(xiě)成這樣，代碼如下

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' //重定向首頁(yè)},{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

不了解重定向的點(diǎn)這里

二、添加視圖容器
在 App.vue 中添加視圖容器標(biāo)簽 router-view

三、在非路由組件中添加路由模式
在vant文檔中的路由模式是
標(biāo)簽欄支持路由模式，用于搭配 vue-router 使用。路由模式下會(huì)匹配頁(yè)面路徑和標(biāo)簽的 to 屬性，并自動(dòng)選中對(duì)應(yīng)的標(biāo)簽。
找到 src->components->Tabbar.vue 下創(chuàng)建路由模式，代碼如下

<template><!--跟標(biāo)記--><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:'購(gòu)物車',icon:'cart-full',path:'/cart',},{name:'我的',icon:'wode',path:'/user',}]}}} </script><style scoped></style>

寫(xiě)完之后就實(shí)現(xiàn)了點(diǎn)擊導(dǎo)航欄實(shí)現(xiàn)頁(yè)面，若是空白的話，去把那四個(gè)組件中的 templated->div 標(biāo)簽下輸入一些文字試試

下一篇文章我們來(lái)做出首頁(yè)，也就是下面這樣

---

上一篇:實(shí)現(xiàn)底部導(dǎo)航欄
下一篇:寫(xiě)出首頁(yè)

---

推薦BGM:Never Going Home

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。