vue前端路由搜索功能实现

 

目的：

参数拼接在url地址栏上可以直接把数据渲染到对应页面。

 

 

实现思路：

第一种情况: 一层层点进去

通过vue得前端路由实现，在商品信息那个组件中放一个默认得请求数据，当点击商品信息时候，让他直接push到goods-view中并携带着请求参数，goods-view中给后端发送数据请求并渲染。

第二种情况： 直接地址栏输入

在1得基础上，在create生命周期函数中判断查询条件是否为空，如果为空就用默认得查询参数先获取一页数据展示，如果不为空则记录一下查询参数，更改页面得渲染，最里层create也可以深拷贝拿到查询参数。

 

 # 中间那层，查询参数需要接收，渲染对应页面条件，需要深拷贝一个对象，直接指向会有问题。

 

遇到到得困难：

重复路由：由于默认检查机制是$.route.path做对比，一直报这个错误

解决方式：在goods-view那层得router-view 加个key参数，做全路径得对比即可

 

特别注意：

create中接收查询参数，需要深拷贝得到，如果直接赋值搞到会报重复路由错误！！！