详解ElementUI之表单验证、数据绑定、路由跳转

详解ElementUI之表单验证、数据绑定、路由跳转

1.新建表单组件el-form.vue

v-model="UserForm.birthday">

v-model="UserForm.birthday">

提交

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.查看效果

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。