预先准备工作

• 提供接口
• 重写route

提供接口

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

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

然后编写一个类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];    }

很可靠，现在我们的接口返回的就是一段json了

{    "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": "商品兌換"                    }                ]            }        ]    }}

至于为什么我的数据格式自动变成了这样，请参照，

百度不可靠

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

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

被文档坑的骚年

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 = '/';        });    }});

总算是完美的解决了这个问题。 下一步，就是解决动态获取路由失败的方案了。下次见。

总结

1. 文档大哥，你能说的清楚点吗？
2. 百度google不可尽信，必须先demo。
3. 前端技术真是日新月异啊，完全跟不上了（作为一个只是偶尔兼职一下前端的大后端）

新增

发现这种方式加载route会使route的点击事件失效

修改方式，登录后，讲route写入浏览器缓存。比如storge

然后第一次加载的时候，从storge获取。

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;            }        });    }});