（vue）elementUI实现登录以及导航栏子路由实现
——学习记录
文章目录
- （vue）elementUI实现登录以及导航栏子路由实现
- ——学习记录
- @[TOC](文章目录)
- 一、主要功能
- 二、代码实现
- 1.安装ElementUI（只做一种方式演示）
- 2.代码结构
- （1）index.js相关代码 ：
- （2）LoginView.vue代码
- （2）MainView.vue代码
- （3）子路由代码my-one-list.vue
- （4）子路由代码my-two-list.vue
- （5）子路由
- 总结
- ——学习记录
- @[TOC](文章目录)
- 1.安装ElementUI（只做一种方式演示）
- 2.代码结构
- （1）index.js相关代码 ：
- （2）LoginView.vue代码
- （2）MainView.vue代码
- （3）子路由代码my-one-list.vue
- （4）子路由代码my-two-list.vue
- （5）子路由
一、主要功能
使用vue，Element组件实现一个具有登录和主页面导航子路由功能实现
1.共有两个页面分别是登录页面，主页面。
2.实现登录与主页面跳转
3.主页面中导航子路由跳转
二、代码实现
1.安装ElementUI（只做一种方式演示）
具体安装详情网址https://element.eleme.cn/#/zh-CN/component/installation
npm 安装
推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。
npm i element-ui -S
引入成功会在package.json中出现 “element-ui”:以及相关版本
main.js中进行插入相关代码完成加载（具体加载步骤在上面网址中的快速上手中）
2.代码结构
本次项目中在views中存放登录以及主页面
在components文件中存放两个子页面
在index.js中配置路由
（1）index.js相关代码 ：
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{//登陆界面
path: '/',
name: 'login',
component: () => import('../views/LoginView.vue'),
},
{//主界面
path: '/main',
name: 'main',
component: () => import(/* webpackChunkName: "about" */ '../views/MainView.vue'),
children: [
{//导航子路由.1
path: 'one',
name: 'one',
components: { main: () => import('../components/my-one-list.vue') }
},
{//导航子路由.2
path: 'two',
name: 'two',
components: { main: () => import('../components/my-two-list.vue') }
},
]
},
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
（2）LoginView.vue代码
<template>
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="账号" prop="username">
<el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pass">
<el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
var validateUsername = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入账号'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkUsername');
}
callback();
}
};
var validatePass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
if (this.ruleForm.checkPass !== '') {
this.$refs.ruleForm.validateField('checkPass');
}
else{this.$router.replace('/main');}
callback();
}
};
return {
ruleForm: {
pass: '123456',
username:'admin'
},
rules: {
pass: [
{ validator: validatePass, trigger: 'blur' }
],
username: [
{ validator: validateUsername, trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
this.$router.push('main')
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
</script>
在网站上找到相关组件进行修改得到的实际页面效果
应用此组件进行加载
登录跳转地址
（2）MainView.vue代码
<template>
<el-container>
<el-row class="tac">
<el-col :span="4">
<el-aside :router="true">
<el-menu :router="true" default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>导航一</span>
</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="/main/one">
选项1
</el-menu-item>
<el-menu-item index="/main/two">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
</el-col>
</el-row>
<el-main>
<router-view name="main"></router-view>
</el-main>
</el-container>
</template>
<script>
export default {
methods: {
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
}
}
}
</script>
效果图如下：
应用此组件进行加载增添修改
这个组件代码给了两个导航一种左侧样式，一种为右侧样式。注意区分，选择想要的样式进行套用。
注意事项：
1.组件中只是给了组件相关代码，需要自己添加结构例如： <el-container>
2.主界面显示子界面
在 <el-container></el-container>中加入 上述代码
（错了好多次才发现问题出现在这）
（3）子路由代码my-one-list.vue
<template>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
}
}
</script>
效果：
（4）子路由代码my-two-list.vue
<template>
<div>
index 页面 里 的 第二个 组件
</div>
</template>
<script>
export default {
data() {
return {
};
}
}
</script>
<style>
</style>
效果：
（5）子路由
相关代码在index.js
使用children:[]将子路由含进去
总结
作为初学者这段时间学了很多东西，在这里分享一下学习经验，以及学习效果。Element-ui对于前端设计真的很方便，各种组件直接复制修改就可以应用到实际的需求中。
