Preparatory work

• Provide interface
• Rewrite route

Provide interface

laravel provides the interface. It's in minutes, isn't it api.php

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

Then write a getRouter method like RouterController

        public function getRouter()
        {
                $router = [
                        [
                                'path'=>'/',
                                'component'=>'Home',
                                'name'=>'Taitung gold coin',
                                'hidden'=>false,
                                'children'=>[
                                        [
                                                'path'           =>      '/admin/index',
                                                'component'      =>      'Admin',
                                                'name'           =>      'Gold coin account'
                                        ],
                                        [
                                                'path'           =>      '/admin/index1',
                                                'component'      =>      'Admin',
                                                'name'           =>      'Gold coin issue'
                                        ],
                                        [
                                                'path'           =>      '/admin/index2',
                                                'component'      =>      'Admin',
                                                'name'           =>      'Commodity exchange'
                                        ]
                                ]
                        ]
                ];
                return ['router' => $router];
    }

It's very reliable. Now our interface returns a section of json

{
    "code": 0,
    "response": {
        "router": [
            {
                "path": "/",
                "component": "Home",
                "name": "Taitung gold coin",
                "hidden": false,
                "children": [
                    {
                        "path": "/admin/index",
                        "component": "Admin",
                        "name": "Gold coin account"
                    },
                    {
                        "path": "/admin/index1",
                        "component": "Admin",
                        "name": "Gold coin issue"
                    },
                    {
                        "path": "/admin/index2",
                        "component": "Admin",
                        "name": "Commodity exchange"
                    }
                ]
            }
        ]
    }
}

As for why my data format automatically becomes this way, please refer to, laravel(5.5) custom middle ware

Baidu unreliable

segmentfault

csdn

This is a series of articles from Baidu, but after I applied it, I simply reported an error. so, I had to read the document myself.

route.addRoutes() in case; not available

The year of writing

route push

route push

According to the usual idea, push must be to add a series of routes, but, I'm sorry, it's really not here.

After I used it, I repeatedly requested the interface.

Get data before navigation is complete

Eh, isn't that what we want?

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

After reading the document, it is not what you want at all. Here is a temporary state, such as loading.

Solution

Finally, the solution was found, officially known as Navigation guard???

beforeEach

const myRouter = new Router({routes});
myRouter.beforeEach((to, from, next) => {
    if(loading == false) {   //Load only once
        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 = '/';
        });
    }
});

At last, it solved the problem perfectly. The next step is to solve the problem of dynamic route acquisition failure. See you next time.

summary

1. Brother doc, can you make it clear?
2. Baidu google can't be trusted. It has to demo first.
3. The front-end technology is changing with each passing day. It can't keep up with it (as a large back-end that only occasionally works part-time at the front-end)