Vue从服务器动态获取router

预先准备工作

• 提供接口
• 重写route

提供接口

laravel提供接口那不是分分钟的是嘛 api.php

Route::group(['prefix'=>'admin','middleware'=>'format'],  function (){
        Route::get('routes','Manager\RouterController@getRouter');
});

 public function getRouter()
        {
                $router = [
                        [
                                'path'=>'/',
                                'component'=>'Home',
                                'name'=>'臺東金幣',
                                'hidden'=>false,
                                'children'=>[
                                        [
                                                'path'           =>      '/admin/index',
                                                'component'      =>      'Admin',
                                                'name'           =>      '金幣賬戶'
                                        ],
                                        [
                                                'path'           =>      '/admin/index1',
                                                'component'      =>      'Admin',
                                                'name'           =>      '金幣發放'
                                        ],
                                        [
                                                'path'           =>      '/admin/index2',
                                                'component'      =>      'Admin',
                                                'name'           =>      '商品兌換'
                                        ]
                                ]
                        ]
                ];
                return ['router' => $router];
    }

{
    "code": 0,
    "response": {
        "router": [
            {
                "path": "/",
                "component": "Home",
                "name": "臺東金幣",
                "hidden": false,
                "children": [
                    {
                        "path": "/admin/index",
                        "component": "Admin",
                        "name": "金幣賬戶"
                    },
                    {
                        "path": "/admin/index1",
                        "component": "Admin",
                        "name": "金幣發放"
                    },
                    {
                        "path": "/admin/index2",
                        "component": "Admin",
                        "name": "商品兌換"
                    }
                ]
            }
        ]
    }
}

至于为什么我的数据格式自动变成了这样，请参照，laravel(5.5)自定义middle ware

百度不可靠

segmentfault

csdn

这是百度来的一系列文章，但是，我应用之后根本就报错，so，只好自己去看文档了。

案例中的 route.addRoutes(); 不可用

被文档坑的骚年

route push坑坑篇

route push

按照往常的想法，push肯定是添加一系列路由，但是，不好意思，这里真不是。

router.push(location, onComplete?, onAbort?) 注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

我使用了之后，居然反复请求了接口。

导航完成前获取数据

咦，这不就是我们想要的？

 beforeRouteUpdate (to, from, next) {
    this.post = null
    getPost(to.params.id, (err, post) => {
      this.setData(err, post)
      next()
    })
  },

完，看完文档之后，根本不是想要的东西，这里是加入了一个临时状态，比如loading。

解决方案

最后，终于找到了解决方案，官方把它叫导航守卫???

beforeEach

const myRouter = new Router({routes});
myRouter.beforeEach((to, from, next) => {
    if(loading == false) {   //只加载一次
        axios.get('/api/admin/routes').then(function (response) {
            if (response.data.code == 0) {
                let rou = response.data.response.router;
                rou.forEach((item, index) => {
                    console.log(rou);
                    myRouter.options.routes.push(item);
                });
                loading = true;
                next();
            }else{
                window.location.href = '/';
            }
        }).catch(function (error) {
            window.location.href = '/';
        });
    }
});

let router = sessionStorage.getItem("router");

if(router == null || router == '') {
    window.location.href = '/login';
}
try {
    router = JSON.parse(router);
}catch (e) {
    window.location.href = '/login';
}

routes.forEach((r,k)=>{
    if ("children" in r && r.children.length > 0) {
        r.children.forEach((son,key)=>{
            if (router.indexOf(son.name)) {
                    r.hidden = false;
                son.hidden = false;
            }

        });
    }
});