1.输入框在遇到焦点的时候变长,失去焦点缩短,输入框前面有下拉框可以选择,在选择下拉框的时候,失去焦点的时候,不能缩短,这个时候,就可以在下拉框的身上绑上@mouseenter.native=“enter”
@mouseleave.native=“leave” 这两个事件,设定一个标识的值,鼠标移入就为true,移开就为false,
这个时候就可以在失去焦点的方法里进行判断了,如果这个标识值为true,就说明在准备下拉框,不执行缩小的事件,如果为false,就执行缩小的事件(这个缩短和伸长,可以用css的过度属性来做)
2.根据搜索词进行搜索,把首页的搜索词带到搜索页面,进行第一次搜索,搜索词是用this.
r
o
u
t
e
r
.
p
u
s
h
(
)
来
进
行
参
数
的
携
带
,
在
搜
索
页
面
用
a
c
t
i
v
e
t
e
d
,
这
个
钩
子
函
数
去
获
取
数
据
,
在
搜
索
页
面
也
有
一
个
搜
索
栏
,
搜
索
栏
更
改
了
输
入
框
的
值
后
进
行
搜
索
,
进
入
详
情
页
,
在
回
退
,
会
用
a
c
t
i
v
e
t
e
d
第
一
次
获
取
过
来
里
的
值
去
搜
索
,
还
是
第
一
次
进
入
搜
索
页
面
的
数
据
,
解
决
的
办
法
就
是
,
在
搜
索
页
进
行
搜
索
的
时
候
,
不
去
获
取
数
据
,
而
是
获
取
当
前
页
面
输
入
框
里
的
值
,
进
行
页
面
跳
转
,
去
更
改
t
h
i
s
.
router.push()来进行参数的携带,在搜索页面用activeted,这个钩子函数去获取数据,在搜索页面也有一个搜索栏,搜索栏更改了输入框的值后进行搜索,进入详情页,在回退,会用activeted第一次获取过来里的值去搜索,还是第一次进入搜索页面的数据,解决的办法就是,在搜索页进行搜索的时候,不去获取数据,而是获取当前页面输入框里的值,进行页面跳转,去更改this.
router.push()来进行参数的携带,在搜索页面用activeted,这个钩子函数去获取数据,在搜索页面也有一个搜索栏,搜索栏更改了输入框的值后进行搜索,进入详情页,在回退,会用activeted第一次获取过来里的值去搜索,还是第一次进入搜索页面的数据,解决的办法就是,在搜索页进行搜索的时候,不去获取数据,而是获取当前页面输入框里的值,进行页面跳转,去更改this.router.push()里的参数,修改地址栏的参数,跳转过来页面,就会激活activeted这个方法,去请求数据,这样再点详情页,回退的话,就还是刚才请求的数据页面
3.页面的页码,在点击分页的时候,也给他用this.$router.push(),存进去,然后再进行跳转,因为再activeted里有获取数据的方法,所以再里面去进行判断,有存的页码,就用存的页码,要不然就默认为1
类别跳转的话,也是用页面跳转,这个时候就要把页码为改为1
4.分页器中需要传page值,elementui中的current-page 接受的值是number类型,在这里直接给他转成number类型就好了,要不然会报类型不匹配的错误(page值传data中的page值就好了,就是当前通过emit,从子组件传回来的值)
5.这个时候就会有路由冗余的情况发生,会报错
在路由文件中加上
就不会报错