vue element admin 二次开发_vue登录功能实现（一）：登录功能技术分析、路由配置。...

内容提要：

• 登录功能流程图，简单实现导航路由配置。

登录功能技术分析

在vue-element-admin的基础上进行二次开发。

登录流程图

路由配置

1. 新建组件create.vue

   // src/views/book/create.vue
   <template>
   <div>testdiv>
   template>
   
   <script>script>
   
   <style lang="scss" scoped>style>
   

2. 在src/router/index.js 中增加新增组件的路由。

   export const asyncRoutes = [
     {
       path: '/book',
       component: Layout,
       meta: { title:'测试', icon: 'documentation' }
       redirect: '/book/create',
       children: [
         {
           path: '/book/create',
           component: () => import('@/views/book/create'),
           name: 'book',
           meta: { title: '添加图书', icon: 'edit', roles: ['admin'] }
         }
       ]
     },
     // ...
   ]
   

• path：组件访问路径。

• component：组件。Layout组件为空白。

• meta：导航和该页面的基础信息。

• redirect：访问时重定向其他路由。

• children：表示该导航下的子级。

• roles：表示数组内的用户才可以访问。