使用vue做一个“淘宝“项目(显示页面)
显示页面前言:做出底部导航栏目录:创建项目文件删除原有文件引用资源文件实现底部导航栏显示页面一、若想每个导航栏都能显示页面,那必先创建组件在 src->views 文件夹下创建四个组件现在我想用这四个界面,那就必须找到 src->router->index.js 文件来调用这四个组件,下面在 index.js 中写这四行代码 ,若写完是灰色的不需要担心,因为你后面还没有引用,继续
·
显示页面
前言:做出底部导航栏
目录:
创建项目文件
删除原有文件
引用资源文件
实现底部导航栏
显示页面
做出首页
显示商品栏
做出分类
一、若想每个导航栏都能显示页面,那必先创建组件
在 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
更多推荐
已为社区贡献3条内容
所有评论(0)