Vue项目流程8，导航守卫的使用，图片懒加载，利用vee-validate实现表单验证，路由懒加载，打包并处理map文件

导航守卫

全局守卫

• 未登录访问，交易相关、支付相关、用户中心相关跳转到登录页面的限制
• 此时登陆之后需要跳转到想要跳转的页面，所以此时login页面的路由跳转需要判断，即路由当中是否包含query参数，有：调到query参数指定路由，没有的话即调到home

else{
        //用户未登录  不能去交易相关、支付相关、用户中心相关
        //去以上页面跳转到登录页，不是以上页面即放行
        let toPath = to.path
        if(toPath.indexOf('/trade') != -1 || toPath.indexOf('/pay') != -1 || toPath.indexOf('/center') != -1){
            //重定向参数，直接将想要跳转页面的query参数存储在地址
            next('/login?redirect=' + toPath)
        }else{
            next()
        }
1
2
3
4
5
6
7
8
9
10

 let toPath = this.$route.query.redirect || '/home'
 this.$router.push(toPath);
1
2

路由独享守卫

• 登陆时，只可从购物车页面跳转到交易页面，即在交易页面需要添加路由独享守卫

   beforeEnter:(to,from,next)=>{
    if(from.path == '/shopcart'){
        next()
    }else{
        //中断当前的导航，url地址会重置到from的地址，即留在当前页面
        next(false)
    }
}
1
2
3
4
5
6
7
8

• 登陆时，只可从交易页面跳转到支付页面，即在支付页面需要添加路由独享守卫

beforeEnter:(to,from,next)=>{
    if(from.path == '/trade'){
        next()
    }else{
        //中断当前的导航，url地址会重置到from的地址，即留在当前页面
        next(false)
    }
}
1
2
3
4
5
6
7
8

组件内守卫（使用少）

• 登陆时，只可从支付页面跳转到支付成功页面，即在ThePay组件需要添加组件内守卫，也可以用路由独享守卫完成

   //组件内守卫
    beforeRouteEnter(to,from,next){
      //在渲染组件对应路由被confirm前调用
      //不能获取组件实例‘this’，因为当守卫执行前，组件实例还没被创建
      if(from.path == '/pay'){
        next()
      }else{
        next(false)
      }
    }
1
2
3
4
5
6
7
8
9
10

• beforeRouteUpdate（暂不使用）

beforeRouteUpdate(to,from,next)){
  //在当前路由改变，但是该组件被复用时调用
  //举例来说，对于一个带有动态参数的路径，当占位参数发生改变时
  //由于会渲染同样的Foo组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用
  //可以访问组件实例‘this’
}
1
2
3
4
5
6

• beforeRouteLeave（暂时不用）

beforeRouteLeave(to,from,next){
  //导航离开该组件的对应路由时调用
  //可以访问组件实例‘this’
}
1
2
3
4

图片懒加载

安装：cnpm i vue-lazyload@1.3.3 -S
引入：import VueLazyload from 'vue-lazyload'
注册插件前引入gif：import pika from '@/assets/images/pika.gif'
注册：

Vue.use(VueLazyload,{
  //懒加载默认的图片
  loading:pika
})
1
2
3
4

使用：找到TheSearch组件内产品的图片

遇到的问题：Failed to resolve directive: lazy
解决：下载1.3.3版本或者是注册处出错检查一遍

自定义插件

//Vue插件一定暴露一个对象
let myPlugins = {}
myPlugins.install = function(Vue,options){
    //Vue.prototype.$bus:任何组件都可以使用
    //Vue.directive
    //Vue.component
    Vue.directive(options.name,(element,params)=>{
        element.innerHTML = params.value.toUpperCase()
    })
}
1
2
3
4
5
6
7
8
9
10

此插件的使用方法与图片懒加载方法一样

表单验证

安装：cnpm i vee-validate@2 --save
在utils文件夹新建validate.js文件使用，然后在入口文件引入：

//vee-validate插件：表单验证区域
import Vue from 'vue'
import veeValidate from 'vee-validate'
Vue.use(veeValidate)
1
2
3
4

import '@/utils/validate.js'
1

引入zh_CN:import zh_CN from 'vee-validate/dist/locale/zh_CN'
使用：

//表单验证
VeeValidate.Validator.localize('zh_CN',{
    messages:{
        ...zh_CN.messages,
        //修改内置规则的message，让确认密码和密码相同
        is:(field) => `${field}必须与密码相同`  
    },
    //给校验的field属性名映射中文名称
    attributes:{
        phone:'手机号',
        code:'验证码',
        password:'密码',
        password1:'确认密码',
        agree:'协议'
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

修改TheRegister手机号的input：

<input type="text" placeholder="请输入你的手机号" v-model="phone" name='phone' v-validate='{required:true,regex:/^1\d{10}$/}' :class='{invalid:errors.has(phone)}'/>
<span class="error-msg">{{errors.first('phone')}}span>
1
2

修改验证码校验：

<input type="text" placeholder="请输入你的验证码" v-model="code" name='code' v-validate='{required:true,regex:/^\d{6}$/}' :class='{invalid:errors.has(code)}'/>
<button style="width: 100px; height: 38px" @click="getCode">
  获取验证码
button>
<span class="error-msg">{{errors.first('code')}}span>
1
2
3
4
5

修改密码校验：

<input type="password" placeholder="请输入你的登录密码" v-model="password" name='password' v-validate='{required:true,regex:/^[0-9A-Za-z]{8,20}$/}' :class='{invalid:errors.has(password)}'/>
<span class="error-msg">{{errors.first('password')}}span>
1
2

修改确认密码校验：

<input type="password" placeholder="请输入你的确认密码" v-model="password1" name='password1' v-validate='{required:true,is:password}' :class='{invalid:errors.has(password1)}'/>
<span class="error-msg">{{errors.first('password1')}}span>
1
2

使用自定义校验规则来校验是否勾选协议：

//自定义校验规则
VeeValidate.Validator.extend('agree',{
    validate:(value)=>{
        return value
    },
    getMessage:(field) => field + '必须同意才可以注册'
})
1
2
3
4
5
6
7

        <input name="agree" type="checkbox" v-model="agree" :checked="agree" v-validate='{required:true,agree:true}' :class="{invalid:errors.has('agree')}"/>
        <span>同意协议并注册《尚品汇用户协议》span>
        <span class="error-msg">{{errors.first('agree')}}span>
1
2
3

修改注册用户：

    //用户注册
    async userRegister() {
      const success = await this.$validator.validateAll();
      //如果全部表单验证成功，再向服务器发请求进行注册，只有有一个表单没有成功就不会发请求
      if (success) {
        try {
          const { phone, code, password } = this;
          await this.$store.dispatch("userRegister", {
            phone,
            code,
            password,
          });
          this.$router.push("/login");
        } catch (error) {
          alert(error.message);
        }
      }
    },
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

路由懒加载

当打包构建应用时，JavaScript包会变得非常大，影响页面加载，如果能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就可以更高效。

const foo = ()=>{
    return import('@/pages/Home/TheHome.vue')
}
......
component:foo,
......
1
2
3
4
5
6

简写：

component:()=>import('@/pages/Home/TheHome.vue'),
1

处理map文件

打包：npm run build
项目打包后代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map就可以向未加密的代码一样，准确的输出是哪一行哪一列有错。所以如果该文件如果项目不需要是可以去除掉。
在vue.config.js配置：productionSourceMap:false
重新打包

购买服务器

设置安全组

让服务器一些端口号打开，利用xshell工具登录服务器，