這篇文章主要介紹ElementUI中如如何實現表單驗證、數據綁定、路由跳轉，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創新互聯是專業的呈貢網站建設公司，呈貢接單;提供成都網站建設、網站制作,網頁設計,網站設計,建網站,PHP網站建設等專業做網站服務;采用PHP框架,可快速的進行呈貢網站開發網頁制作和功能擴展;專業做搜索引擎喜愛的網站,專業的做網站團隊,希望更多企業前來合作!

1.新建表單組件el-form.vue

2.新建一個Module,EleUserInfo.js

import Vue from "vue";
import {routerConfig} from "./../../jssrc/config";

export default{
  state:{
    UserForm:{truename:"", age:"", birthday:""},
    CheckRules:{
      truename:[
        {required:true, message:"請輸入活動名稱", trigger:'blur'},
        {min:3, max:5, message:"必須3-5個字符", trigger:'blur'}
      ],
      age:[{validator:(rule,value,callback)=>{
        if(/^\d+$/.test(value) == false){
          callback(new Error("年齡只能輸入數字"));
        }else{
          callback();
        }
      }, trigger:'blur'}]
    },
  },

  actions:{
    setUserInfo(context){
      // 路由跳轉
      routerConfig.push({name:"newslist"});
    }
  }
}

3.我們把jssrc/index.js 中的代碼分離出一部分

config.js

import VueRouter from 'vue-router';

import newsdetail from "./../components/news-detail.vue";

import eltable from "./../components/el-table.vue";
import elindex from "./../components/elmentui/el-index.vue";
import elhot from "./../components/elmentui/el-hot.vue";
import eluserinfo from "./../components/elmentui/el-form.vue";

const userlogin = resolve => {
  // 成功之后的回調
  resolve(require("./../components/user-login.vue")); // 這就是異步加載的方式
}

const newslist = resolve => {
  // 成功之后的回調
  resolve(require("./../components/news-list.vue")); // 這就是異步加載的方式
}

// 路由模塊
export const routerConfig = new VueRouter({
  routes: [
    { path: '/', component: userlogin},
    { path: '/news', component: newslist, name:"newslist"},
    { path: '/news/:newsid', component: newsdetail, name:"newsdetail"},
    { path: '/login', component: userlogin,name:"userlogin" },
    { path: '/eltable', component: eltable,name:"eltable" },
    { path: '/elindex', component: elindex,name:"elindex", children:[
      {path:"hot",component:elhot,name:"elhot"},
      {path:"userinfo",component:eluserinfo,name:"eluserinfo"},
    ]}
  ]
})

4.然后jssrc/index.js 修改成如下

import Vue from "vue";

import pagenav from "./../components/page-nav.vue";

// 引入
import validate from "./../components/validate";
// 使用
Vue.use(validate);

import VueRouter from 'vue-router';
Vue.use(VueRouter); // 全局使用插件

import VueResource from 'vue-resource';
Vue.use(VueResource);

import UserModule from "./../store/modules/UserModule";
import NewsModule from "./../store/modules/NewsModule";
import EleModule from "./../store/modules/eleModule";
import EleUserInfomoldule from "./../store/modules/EleUserInfo";

import Vuex from 'vuex';
Vue.use(Vuex);

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
Vue.use(ElementUI);



const vuex_store = new Vuex.Store({
  modules:{
    users:UserModule,
    news:NewsModule,
    ele:EleModule,
    userinfo:EleUserInfomoldule
  }
})


//路由的配置
import {routerConfig} from "./config";


// 全局組件,不加入路由管理
Vue.component("page-nav",pagenav);

let myvue = new Vue({
  el:".container",
  store:vuex_store, //注入到vue
  router:routerConfig,
});

5.查看效果

以上是“ElementUI中如如何實現表單驗證、數據綁定、路由跳轉”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注創新互聯行業資訊頻道！