（vue）elementUI实现登录以及导航栏子路由实现 ——学习记录

（vue）elementUI实现登录以及导航栏子路由实现

——学习记录

一、主要功能

使用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对于前端设计真的很方便，各种组件直接复制修改就可以应用到实际的需求中。