Vue关于动态添加路由的一个坑,动态添加子路由

2018 年 9 月 21 日 2 条评论 6.73k 次阅读 7 人点赞

最近在研究Vue,项目的菜单是后台动态返回节点动态生成头部导航,然后再动态添加路由,利用的方法是 $router.addRouters()【官网的文档真的很简洁,说了跟没说一样】,路由的参数是一个数组,这个数组和我们手动进行路由配置里的routes里的是需要一样的数组;

还记得我们是怎么配置路由的吗?

import Vue from 'vue'
import VueRouter from 'vue-router'
 
Vue.use(VueRouter)

import home from '@/page/home'
import userinfo from '@/page/userinfo'

export default new Router({
  routes: [
    {
      path: '/home',
      component: home
    },
    {
      path:'/userinfo',
      component: userinfo
    },

  ]
});

对,我们需要先用import导入组件,一个数组对应一个组件的,这在写死的情况下很容易的;
routes 里是一个数组,数组里有 path 和 component
path 对应我们vue要访问的url
component 对应我们import进来的模板组件路径

但是如果我们用 $router.addRoutes() 这个方法的时候,你想过里面的参数要怎么写吗?
像这样?

$router.addRoutes([
    {
      path: '/home',
      component: home
    }
])

如果你手动写的话,那这是没问题的,可是后台返回给我们的数据是这样的
注意:component那里后台返回给我们的字符串的,我们不能用变量的

[
    {
      path: '/home',
      component: '/home'  
    },
    {
      path: '/userinfo',
      component: '/userinfo'  
    }
]

所幸的是,vue-router里提供了动态加载组件的方法,比如:compoent选项后面其实是可以跟一个函数的,比如

[
  path: '/home',
  component: require.ensure([], (require) => {
      resolve(require('@/page/home.vue'))
  })
]

看到这里,你会发现,其实我们写个函数,传进去字符串,然后拼接一下就可以了

function getViews(path) {
  return resolve => {
    require.ensure([], (require) => {
      resolve(require('@/page/' + path + '.vue'))
    })
  }
}

然后,我们通过服务器请求回来JSON数据后,可以这样进行添加
假如,我们是通过axios进行请求后台数据,后台返回给我们的JSON数据是这样的:

{
    "userInfo": {
        "phone": "13000000000",
        "id": 10000,
        "username": "张三丰"
    },
    "permissions": [
        {
            "path": "/userinfo",
            "name": "个人信息",
            "component": "/userinfo"
        },
        {
            "path": "/home",
            "name": "系统首页",
            "component": "/home"
        }
    ],
    "errCode": "0000",
    "errMsg": "获取成功!"
}

我们需要拿到 permissions  中的数组

let permissionsData = response.data.permissions;

//创建一个数组用来存储符合权限的路由
let dataRouter = [];
//循环遍历动态路由表的每一个路由
for (let i=0;i<permissionsData.length;i++){
   //console.info("router:"+getViews(someData[i].path));
   let data = {};
   data['path'] = permissionsData[i].path;
   data['name'] = permissionsData[i].name;
   data['component'] = getViews(permissionsData[i].path);
   dataRouter.push(data);
}

// 将路由信息,菜单信息,用户信息存到sessionStorage里
sessionStorage.setItem("routes", JSON.stringify(permissionsData));

//动态添加路由信息
this.$router.addRoutes(dataRouter);

这就把我们从服务器请求回来的 权限数据,动态的添加到Vue-router里了。
如果是添加到子路由,我的办法的是这样的:
例如把服务器请求过来的数据添加到  / 节点上

$router.addRoutes([
   {
   	path: '/',
   	component: resolve => require(['@/components/Layout'], resolve),
   	meta: { title: 'Layout' },
   	children: dataRouter,
   }
]);

如果你有更简单的添加的子路由的方式,还望赐教~

 

 

雷雷

这个人太懒什么东西都没留下

文章评论(2)

  • 面对疾风

    厉害

    2019 年 5 月 29 日
  • 哈杀给

    兄弟我遇到问提了 能不呢帮忙加解决一下

    2019 年 7 月 29 日
  • (Spamcheck Enabled)