后管系统-路由和页面

路由和页面

0.路由导航守卫的优化

思路: 如果已经有个人信息就在路由跳转的时候不会再重复获取了，用userId判断。

方法: 先获取userId，再通过if判断,如果没有就获取，有就next()放行

		const userInfo = store.state.user.userInfo
        if(!userInfo.userId) {
          // 如果没有就获取
          console.log('请求个人信息')
          await store.dispatch('user/getUserInfo')
        }
        next()

此时有userId的话路由跳转只会触发一次console.log('请求个人信息')。

1.整理路由并拆分动态路由和静态路由。

1.1 删除除了login，dashbroad，404的其他路由组件，并删除对应的路由配置文件。

1.2 用户登录之后，根据后端返回的数据表示携带的功能不同，动态生成路由配置。

​ 新建动态路由表

// 动态路由表：需要做权限控制的路由，用户如果权限不一致访问到的路由也不一样。 
export const asyncRoutes = []

​ 将动态和静态合并在一起

routes: [...constantRoutes, ...asyncRoutes] // 使用展开运算符

1.3 新建8个功能页面组件并配置路由。

​ …略

2.模块化管理动态路由

2.1 对动态路由进行物理拆分,实现模块化管理

2.2 把每一个路由配置单独写在一个文件中

2.3 在router/index.js下导入并在动态路由表使用。

2.4 设置图标以及title，在每个路由文件中配置

​ 例: title以及icon在meta对象中配置

import Layout from '@/layout'
// Layout组件中包含
export default {
  path: '/employees', // 路径
  component: Layout,  // 组件
  children: [{
    name: 'employees', // 给路由规则加一个name
    path: '', // 这里当二级路由的path什么都不写的时候 表示当前路由为默认路由直接渲染对应组件
    component: () => import('@/views/employees/employees.vue'),
    // 路由元信息  其实就是存储数据的对象 我们可以在这里放置一些信息
    meta: { title: '员工管理', icon: 'people' }
  }]
}

注意: 404/login路由没有显示到左侧菜单中，是它们有一个属性：hidden: true。

3.动态设置标题(使用document.title方法)

3.1 引入工具方法getPageTitle

import getPageTitle from '@/utils/get-page-title'

3.2 创建路由守卫，路由导航守卫可以写多个。

router.beforeEach((to, from, next) => {
 document.title = getPageTitle(to.meta.title)
 next()
})

4.头部布局

使用el-tree组件

…略

5.树形组件数据渲染

5.1 新建一个模块文件发请求

5.2 在对应组件中使用created调用

5.2 增加插槽，调整自定义结构。（使用{{ data.name }} 与 {{ data.manager}} ）