vue前端验证码

最近做项目接触Vue，前端生成验证码。原理是这样的：
1.创建一个子组件（identify.vue），负责生成随机数，然后用canvas绘制；
2.创建父组件（codetest.vue）调用子组件，接收验证码，刷新验证码

配置路由 router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import store from '@/utils/store'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      redirect: {name: 'login'},
    },
    {
      path: '/code',    //新增路由
      name: 'code',
      component:  () => import('@/views/codeTest.vue'),
    },

  ]
})


export default router

codeTest.vue(父组件)：

identify.vue组件（子组件）

 

运行效果：