Vue(尚品汇)第二天

一、OneDay

1.1未登录的导航路由守卫

之前方便测试 未登录全部放行 我的理解redirect是query参数

当我未登录跳转订单页面 浏览器url已经帮我记录我想跳转的路由信息了

所以我们的登录组件不能直接傻乎乎的跳home首页了

效果图

1.2图片懒加载

安装vue的懒加载工具vue-lazyload（这里下载的是1.3.3的版本）

npm i vue-lazyload @1.3.3

使用插件写配置对象

之前写src直接换成v-lazy

效果图：一瞬间可以看到我的奥特曼

1.3自定义插件

先封装一个插件

然后我们直接在main的js中进行测试

控制台看看效果

做一个自定义小写转大写的指令 directive就是绑定自定义指令，第一个参数就是绑定的name，第二个参数是个回调函数

对应的需要改一下mianjs的名字

直接在app.vue中试试效果

效果图 最顶上打印的abc

1.4路由懒加载

把12行这种引入方式换成19行这种写 实现了按需加载

二、TwoDay

2.1登录操作

偷的代码处理登录逻辑是Promise风格咱们改写一下

配置代理

2.2获取商品数据

先写接口

对应另外三个接口也一起暴露出去

重新配置请求转发

把接口配置成全局API

最后写组件的请求

效果图：

接下来借助element-ui表格动态渲染数据

对应的分页器操作

效果图