Footer 组件的显示与隐藏
显示或隐藏组件：v-if | v-show
- Footer 组件：在 Home、Search 显示 Footer 组件
- Footer 组件：在登录、注册的时候是隐藏的
打开 router 文件下的 index.js 改为下图
打开 App.vue 改为下图
路由传参
- params 参数：属于路径当中的一部分，需要注意，在配置路由的时候需要占位
- query 参数：不路径当中的一部分，类似于 ajax 中的 queryString，不需要占位
使用对象的方式传参
先双向绑定输入框里的值
将 keyword 收集到的值传给 search 组件
打开 router 文件下的 index.js
打开 Header 文件下的 index.vue
现在能成功传值。但是多次点击会报错，这是底层原因，所以我们只能重写 push 方法
打开 router 文件夹下的 index.js
index.js
//配置路由的地方
import Vue from 'vue';
import VueRouter from 'vue-router';
//使用插件
Vue.use(VueRouter);
//引用路由组件
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Refister from '@/pages/Refister'
import Search from '@/pages/Search'
//先把 VueRouter 原型对象的 push 保存一份
let originPush = VueRouter.prototype.push;
let originPeplace = VueRouter.prototype.replace;
//重写 push | replace
//第一个参数：告诉原来 push 方法，你往哪里跳转（传递哪些参数）
//第二个参数：成功的回调
//第三个参数：失败的回调
VueRouter.prototype.push = function(location,resolve,reject){
if(resolve && reject){
//call | apply
//相同点：都可以调用函数一次，都可以篡改函数的上下文一次
//不同点：call 与 apply 传递参数：call传递参数用逗号隔开，apply方法执行，传递数组
originPush.call(this,location,resolve,reject);
}else{
originPush.call(this,location,()=>{},()=>{});
}
}
VueRouter.prototype.replace = function(location,resolve,reject){
if(resolve && reject){
originPeplace.call(this,location,resolve,reject);
}else{
originPeplace.call(this,location,()=>{},()=>{});
}
}
//配置路由
export default new VueRouter({
//配置路由
routes:[
{
path:'/home',
component:Home,
meta:{show:true}
},
{
path:'/login',
component:Login,
meta:{show:false}
},
{
path:'/refister',
component:Refister,
meta:{show:false}
},
{
path:'/search/:keyword?',//加上 "?" 意思是 params 参数可传可不传
component:Search,
meta:{show:true},
name:'search'
},
//重定向
{
path:'*',
redirect:'/home'
}
]
})
打开浏览器测试，发现点击多次搜索也不会报错
Home 首页模块
- 把静态页面完成
- 拆分出静态组件
- 获取服务器的数据进行展示
- 动态业务
三级联动组件 TypeNav
由于三级联动组件，在Home、Search、Detail，把三级联动注册为全局组件
好处：只需要注册一次，就可以在项目任意地方使用
在 Home 文件夹下创建 TypeNav 文件并在里创建 index.vue 文件
index.vue
<template>
<!-- 商品分类导航 -->
<div class="type-nav">
<div class="container">
<h2 class="all">全部商品分类</h2>
<nav class="nav">
<a href="###">服装城</a>
<a href="###">美妆馆</a>
<a href="###">尚品汇超市</a>
<a href="###">全球购</a>
<a href="###">闪购</a>
<a href="###">团购</a>
<a href="###">有趣</a>
<a href="###">秒杀</a>
</nav>
<div class="sort">
<div class="all-sort-list2">
<div class="item bo">
<h3>
<a href="">图书、音像、数字商品</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书</a>
</dt>
<dd>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">家用电器</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书1</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">手机、数码、充值</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">充值</a>
</dt>
<dd>
<em>
<a href="recharge.html">充值</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">电子书2</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">电脑、办公</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书3</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>教育</dt>
<dd>
<em>
<a href="">教材教辅</a>
</em>
<em>
<a href="">考试</a>
</em>
<em>
<a href="">外语学习</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>其它</dt>
<dd>
<em>
<a href="">英文原版书</a>
</em>
<em>
<a href="">港台图书</a>
</em>
<em>
<a href="">工具书</a>
</em>
<em>
<a href="">套装书</a>
</em>
<em>
<a href="">杂志/期刊</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">家居、家具、家装、厨具</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书4</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">服饰内衣</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书5</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">个护化妆</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书6</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>教育</dt>
<dd>
<em>
<a href="">教材教辅</a>
</em>
<em>
<a href="">考试</a>
</em>
<em>
<a href="">外语学习</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>其它</dt>
<dd>
<em>
<a href="">英文原版书</a>
</em>
<em>
<a href="">港台图书</a>
</em>
<em>
<a href="">工具书</a>
</em>
<em>
<a href="">套装书</a>
</em>
<em>
<a href="">杂志/期刊</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">运动健康</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书7</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">汽车用品</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书8</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">彩票、旅行</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">理财、众筹</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">母婴、玩具</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">箱包</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">运动户外</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">箱包</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name:'TypeNav',
}
</script>
<style scoped lang="less">
.type-nav {
border-bottom: 2px solid #e1251b;
.container {
width: 1200px;
margin: 0 auto;
display: flex;
position: relative;
.all {
width: 210px;
height: 45px;
background-color: #e1251b;
line-height: 45px;
text-align: center;
color: #fff;
font-size: 14px;
font-weight: bold;
}
.nav {
a {
height: 45px;
margin: 0 22px;
line-height: 45px;
font-size: 16px;
color: #333;
}
}
.sort {
position: absolute;
left: 0;
top: 45px;
width: 210px;
height: 461px;
position: absolute;
background: #fafafa;
z-index: 999;
.all-sort-list2 {
.item {
h3 {
line-height: 30px;
font-size: 14px;
font-weight: 400;
overflow: hidden;
padding: 0 20px;
margin: 0;
a {
color: #333;
}
}
.item-list {
display: none;
position: absolute;
width: 734px;
min-height: 460px;
background: #f7f7f7;
left: 210px;
border: 1px solid #ddd;
top: 0;
z-index: 9999 !important;
.subitem {
float: left;
width: 650px;
padding: 0 4px 0 8px;
dl {
border-top: 1px solid #eee;
padding: 6px 0;
overflow: hidden;
zoom: 1;
&.fore {
border-top: 0;
}
dt {
float: left;
width: 54px;
line-height: 22px;
text-align: right;
padding: 3px 6px 0 0;
font-weight: 700;
}
dd {
float: left;
width: 415px;
padding: 3px 0 0;
overflow: hidden;
em {
float: left;
height: 14px;
line-height: 14px;
padding: 0 8px;
margin-top: 5px;
border-left: 1px solid #ccc;
}
}
}
}
}
&:hover {
.item-list {
display: block;
}
}
}
}
}
}
}
</style>
在 main.js 里注册为全局组件
//三级联动组件--全局组件
import TypeNav from '@/pages/Home/TypeNav'
//第一个参数：全局组件的名字，第二个参数：哪一个组件
Vue.component(TypeNav.name,TypeNav)
在 Home 文件夹里的 index.vue 文件里使用 三级联动组件
<!--三级联动全局组件：三级联动已注册为全局组件，所以不需要再引入-->
<TypeNav></TypeNav>
此时三级联动组件（静态）已完成
4399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
