前端哪些破事

vue-router "path" is required in a route configuration？

正确的写法为：

component: () => import ('@/views/own-space/own-space.vue')
我错误的写为了：

component:  import ('@/views/own-space/own-space.vue')
以为import就可以了，应该是vue-router里要求component为组件实例或者函数。```
---

##vue-router在2.0版本中提供了addRoutes方法添加路由?
#####1、首先在本地配置好固定不变的路由地址，例如登录，404这些页面，如下:
``` import Vue from 'vue'
import Router from 'vue-router'
import store from '@/vuex/store'
Vue.use(Router)

let router = new Router({
  routes: [
    {
      path: '/login',
      name: 'login',
      meta: {requireAuth: false},
      // 模块使用异步加载
      component: (resolve) => require(['../components/login/login.vue'], resolve)
    }]
})
// 拦截登录，token验证
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth === undefined) {
    if (store.state.token) {
      next()
    } else {
      next({
        path: '/login'
      })
    }
  } else {
    next()
  }
})
export default router   ```
#####配置好这些固定的路由后我们才能够到登录页面，不然是无法继续下去的。

2、然后重要的一步，我们需要跟后端老铁约定好需要返回的权限菜单列表信息；首先这里我们先分析一下自己需要的路由结构，这里以我自己的路由作为例子。如果是我自己直接定义路由的话，会是以下结构：

let router = new Router({
routes: [
{
path: '/login',
name: 'login',
meta: {requireAuth: false},
component: (resolve) => require(['../components/login/login.vue'], resolve)
}，
{
path: '/',
redirect: '/layout'
},
{
path: '/layout',
component: (resolve) => require(['../layout.vue'], resolve),
children: [
{
path: 'index',
meta: {
type: '1', //控制是否显示隐藏 1显示，2隐藏
code: 00010001, // 后面需要控制路由高亮
title: '首页', // 菜单名称
permissonList: [] // 权限列表
}
component: (resolve) => require(['@/components/index/index.vue'], resolve)
},
{
...
}
]
}]
})

#####根据以上结构分析，其实真正需要动态配置的路由其实是/layout下面的children部分，所以需要后端返回给我们包含所有路由的一个数组：
![后台返回数据]（![image.png](https://img.haomeiwen.com/i26128487/1c900467bd9afb04.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
）
#####返回的数据中rootList中是一级导航的列表，一级导航实际是没有路由功能，只是作为切换二级菜单的触发器，subList才是我们真正需要的路由信息。
3、拿到权限路由信息后，需要我们在本地对数据进行处理组装成我们需要的数据：

// 登录
login () {
let params = {
account: this.loginForm.username,
password: encrypt(this.loginForm.password)
}
this.loading = true
this.bumng + '/login', this.state_ok) {
// 合并一级菜单和二级菜单，便于显示
let menus = handleMenu.mergeSubInRoot(res.rootList, res.subList)
// 本地化处理好的菜单列表
this.saveRes({label: 'menuList', value: menus})
// 根据subList处理路由
let routes = handleMenu.mergeRoutes(res.subList)
// 本地化subList，便于在刷新页面的时候重新配置路由
this.saveRes({label: 'subList', value: res.subList})
// 防止重复配置相同路由
if (this.router.addRoutes(routes)
// this.router.options.routes.push(routes)
}
this.$router.replace('/layout/index')
}
})
.catch((err) => {
this.loging = false
console.error('错误：', err)
})
},

处理菜单列表和subList的方法：mergeSubInRoot 和 mergeRoutes:

const routes = [
{
path: '/',
redirect: '/layout'
},
{
path: '/layout',
component: (resolve) => require(['../layout.vue'], resolve),
children: []
}
]
export default {
/**

• 合并主菜单和子菜单
• @param: rootList [Array] 主菜单列表
• @param: subList [Array] 子菜单
• /
  mergeSubInRoot (roots, subs) {
  if (roots && subs) {
  for (let i = 0; i < roots.length; i++) {
  let rootCode = roots[i].code
  roots[i].children = []
  for (let j = 0; j < subs.length; j++) {
  if (rootCode === subs[j].code.substring(0, 4)) {
  roots[i].children.push(subs[j])
  }
  }
  }
  }
  return roots
  },
  /*
• 合并远程路由到本地路由
• @param: subList [Array] 远程路由列表
• @param: routes [Array] 本地路由列表
• */
  mergeRoutes (subs) {
  if (subs) {
  for (let i = 0; i < subs.length; i++) {
  let temp = {
  path: subs[i].actUrl,
  name: subs[i].actUrl,
  component: (resolve) => require([@/components/${subs[i].component}.vue], resolve),
  meta: {
  type: subs[i].type,
  code: subs[i].code,
  title: subs[i].name,
  permissionList: subs[i].permissionList
  }
  }
  routes[1].children.push(temp)
  }
  }
  return routes
  }
  }

---
闲着无聊来了一笔喜欢的点赞