微人事-创建前端vue组件，并从数据库加载页面

创建前端vue组件

创建组件页面

当添加了组件后

以下代码将找不到对应的页面

            // 整理成对应的格式 并且动态的加载菜单页
            let fmRouter={
                path:path,
                name:name,
                iconCls:iconCls,
                meta:meta,
                children:children,
                component(resolve){
                    require(['../views/'+component+'vue'],resolve)
                }
            }

修改如下处理
判断component是不是以Emp开头 以此类推并指定对应的路径

            component(resolve){
                if (component.startsWith("Home")) {
                    require(['../views/'+component+'.vue'],resolve);
                }else if (component.startsWith("Emp")){
                    require(['../views/emp/'+component+'.vue'],resolve);
                }else if (component.startsWith("Per")){
                    require(['../views/per/'+component+'.vue'],resolve);
                }else if (component.startsWith("Sal")){
                    require(['../views/sal/'+component+'.vue'],resolve);
                }else if (component.startsWith("Sta")){
                    require(['../views/sta/'+component+'.vue'],resolve);
                }else if (component.startsWith("Sys")){
                    require(['../views/sys/'+component+'.vue'],resolve);
                }
            }

什么时候调用工具方法

登录成功调用
1.这个是浏览器应用，数据保存在vuex中也就是内存中。当用户按了f5
或者浏览器的刷新 将不会调用加载方法了。

解决方案
使用路由导航守卫 我们使用路由全局前置守卫
路由的导航守卫类似于后端的过滤器
在main.js中添加前置守卫 to去哪个画面 from 从哪个画面来

router.beforeEach((to,from,next)=>{
  if (to.path == '/'){
    next();
  }else{
    initMenu(router,store)
    next();
  }
})

使用计算属性 将routes 拿出来作为数据源
home

        computed:{
          routers(){
              return this.$store.state.routes;
          }
        }

store

export default new Vuex.Store({
    state:{
        // 数据库加载的菜单存放
        routes:[]
    },
    mutations:{
        // 通过state访问routes 调用的时候可以不传state
        initRoutes(state,date){
            state.routes =date;
        }
    },
    actions:{

    }
})

home页面调用

// unique-opened 一次只打开一个
// :index="index+''"  不能给一个死值，不然会被认为是一个菜单项目 unique-opened 失效
                    <el-menu @select="menuClick" unique-opened>
                        <el-submenu :index="index+''" v-for="(item, index) in routers" :key="index" v-if="!item.hidden">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{{item.name}}</span>
                            </template>
                                <el-menu-item :index="child.path" v-for="(child, indexj) in item.children" :key="indexj">{{child.name}}</el-menu-item>
                        </el-submenu>
                    </el-menu>

实现效果

左侧菜单图标

http://www.fontawesome.com.cn/
安装fontawesome

npm install font-awesome

安装成功之后 更改class
更改前

                        <el-submenu :index="index+''" v-for="(item, index) in routers" :key="index" v-if="!item.hidden">
                            <template slot="title">
                            
                                <i class="el-icon-location"></i>
                                
                                <span>{{item.name}}</span>
                            </template>
                                <el-menu-item :index="child.path" v-for="(child, indexj) in item.children" :key="indexj">{{child.name}}</el-menu-item>
                        </el-submenu>

main.js中引用fontawesome

import 'font-awesome/css/font-awesome.min.css'

更改后

                    <el-menu @select="menuClick" unique-opened>
                        <el-submenu :index="index+''" v-for="(item, index) in routers" :key="index" v-if="!item.hidden">
                            <template slot="title">
                            
                                <i style="margin-right: 5px;color: #3fceff" :class="item.iconCls"></i>
                                
                                <span>{{item.name}}</span>
                            </template>
                                <el-menu-item :index="child.path" v-for="(child, indexj) in item.children" :key="indexj">{{child.name}}</el-menu-item>
                        </el-submenu>
                    </el-menu>

效果如下

登录页面 回车登录

因为是elementui 所以@keydown.enter.native 加了native 当回车的时候触发事件

            <el-form-item prop="password">
                <el-input type="text" v-model="loginForm.password" auto-complete="off" placeholder="请输入用户密码:" @keydown.enter.native="submitLogin"></el-input>
            </el-form-item>