vue实现表单验证

 1.路由跳转

先点开Vue项目中src目录配置router文件然后用import暴露你的表单页名称并在你的Router实例中中注册路由表代码如下

import Create from "@/views/create/create.vue";//前面是暴露的名字，首字母要用大写。后面是你的表单页所在目录@是..的简写即返回上一层
const router=new Router({
mode:"history"//这里是写路由是什么模式
routes:[
{
      path: "/create",//默认为/多个的话就是/加上路径
      name: "create",
      component: Create,
      title: "表单",
    },
]
})

 路由表配置完成之后记得将home页中的自己router-link标签的to选项配置一下

<router-link :to="{ name: 'create' }" class="collection">表单</router-link>

 随后就是表单页

 效果图

 

 

功能实现代码如下

插件用的是element.ui可以在终端中使用npm i element-ui 安装成功之后在package.json中查看并在main.js中引用

 

 

  

 安装完成后就可以使用啦。

<template>
  <div class="create">
    <h2>欢迎