vue登录功能实现(一):登录功能技术分析、路由配置

登录功能流程图,简单实现导航路由配置。
118阅读 · 0评论 · 2020-9-6 23:30发布

登录功能技术分析

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

登录流程图

路由配置

  1. 新建组件create.vue

    // src/views/book/create.vue
     <template>
         <div>test</div>
     </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'] }
           }
         ]
       },
       // ...
     ]
    
  3. path:组件访问路径。

  4. component:组件。Layout组件为空白。
  5. meta:导航和该页面的基础信息。
  6. redirect:访问时重定向其他路由。
  7. children:表示该导航下的子级。
  8. roles:表示数组内的用户才可以访问。

共有0 条评论

暂无评论