您现在的位置是：首页 >技术教程 >Vue的学习6网站首页技术教程

109集：路由设计配置-一级路由配置

一级路由的代码如下：

先完成文件夹和页面的准备：

里面的其中一个内容展示：

所有的一级路由就完成了：

                                                               二级路由的思路及代码如下：

去官网找到Tabbar标签栏直接复制即可：                                                                                       

去官网找到icon去寻找自己想要的图标：

在Tabbar中找到自定义颜色（active-color：激活的颜色  inactive-color：未激活的颜色）：

同样的先完成四个文件以里面的代码（只展示了一个里面的代码）的：

实现切换：

加一点优化（redirect）：

110集：登录页静态布局&图形验证码功能

新建：

导入：

按需导入：

NavBar:

通用样式：

静态布局的编写：

111集：api接口模块-封装图片验证码接口

代码如下：

          

112集：pi接口模块-封装图片验证码接口

      

       

                                                                        第一种：

                

第二种：

                           

其他文案的例子：

代码:

效果图：

113集：短信验证功能

步骤一：

            

离开页面发现还在倒计时，所以要停掉：

步骤一总结一下：

                    

                                                                步骤二:

效果图展示：

步骤二总结一下：

步骤三：

短信验证的接口:

效果图：

                                                                       步骤三总结一下：

114集：封装api登录接口-实现登录

封装登录接口:

登录前的校验及成功跳转：

总结一下：

115集：响应拦截器-统一处理错误

效果图：

总结一下：

116集：将token权证信息存入vuex

第一步:

第二步：

第三步:

第四步：

效果图:

总结一下：

117集：storage存储模块-vuex持久化处理

118集：添加请求loading效果

总结：

119集：全局前置导航守卫

120集：首页-静态结构准备&动态渲染

121集：搜索历史管理

122集：搜索列表页-静态布局与渲染

123集：商品详情页-静态结构和动态渲染

124集：加入购物车-弹层显示

125集：加入购物车-数字框基本封装

126集：加入购物车-判断token登录提示

127集：购物车-基本静态布局

128集：购物车-构建vuex模块，获取数据存

总结：

129集：购物车-mapState渲染购物车列表

130集：购物车-封装getters动态计算展示

131集：购物车-全选反

132集：购物车数字框修改数量

133集：购物车-编辑、删除、空购物车处理