黑马程序员技术交流社区

标题: 【上海校区】 [打印本页]

---

作者: 依惜    时间: 2019-11-27 16:18
标题: 【上海校区】
                                                             动态加载菜单和路由(addRoutes)

vue-router 提供了 addRoutes() 方法，可以动态注册路由， 需要注意的是，动态添加路由是在路由表中 push 路由，由于路由是按顺序匹配的，因此需要将诸如404页面这样的路由放在动态添加的最后。

代码示例
// store.js
// 将需要动态注册的路由提取到vuex中
const dynamicRoutes = [
{
  path: '/manage',
  name: 'Manage',
  meta: {
   requireAuth: true
  },
  component: () => import('./views/Manage')
},
{
  path: '/userCenter',
  name: 'UserCenter',
  meta: {
   requireAuth: true
  },
  component: () => import('./views/UserCenter')
}
]

在 vuex 中添加 userRoutes 数组用于存储用户的定制菜单。在setUserInfo中根据后端返回的菜单生成用户的路由表。
// store.js
setUserInfo (state, userInfo) {
state.userInfo = userInfo
state.auth = true // 获取到用户信息的同时将auth标记为true，当然也可以直接判断userInfo
// 生成用户路由表
state.userRoutes = dynamicRoutes.filter(route => {
  return userInfo.menus.some(menu => menu.name === route.name)
})
router.addRoutes(state.userRoutes) // 注册路由
}

修改菜单渲染
// App.vue
<div id="nav">
<router-link to="/">主页</router-link>
<router-link to="/login">登录</router-link>
<template v-for="(menu, index) of $store.state.userInfo.menus">
  <router-link :to="{ name: menu.name }" :key="index">{{menu.title}}</router-link>
</template>
</div>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2