内容提要:
登录功能流程图,简单实现导航路由配置。
登录功能技术分析
在vue-element-admin的基础上进行二次开发。
登录流程图
路由配置
新建组件create.vue
// src/views/book/create.vue
<template>
<div>testdiv>
template>
<script>script>
<style lang="scss" scoped>style>在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:表示数组内的用户才可以访问。