Vue-router dynamic load menu tree

Question

I'm trying to create a menu tree with vue-router by ajax request,but the $mount function was called before the ajax request responsed, so the router in the Vue instance always null. Is there any good solution here?

Here is my code (index.js):

import Vue from 'vue';
import Element from 'element-ui';
import entry from './App.vue';
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';
import Vuex from 'vuex'
import configRouter from './route.config';
import SideNav from './components/side-nav';
import Css from './assets/styles/common.css';
import bus from './event-bus';
import dynamicRouterConfig from './dynamic.router';

Vue.use(VueRouter);
Vue.use(Element);
Vue.use(VueResource);
Vue.use(Vuex);

Vue.http.interceptors.push((request, next) => {
  bus.$emit('toggleLoading');
  next(() => {
    bus.$emit('toggleLoading');
  })
})

Vue.component('side-nav', SideNav);

app = new Vue({
    afterMounted(){
      console.info(123);
    },
    render: h => h(entry),
    router: configRouter
});
app.$mount('#app');

route.config.js:

import navConfig from './nav.config';
import dynamicRouterConfig from './dynamic.router';

let route = [{
  path: '/',
  redirect: '/quickstart',
  component: require('./pages/component.vue'),
  children: []
}];
const registerRoute = (config) => {

  //require(`./docs/zh-cn${page.path}.md`)
  //require(`./docs/home.md`)
  function addRoute(page) {
    if (page.show == false) {
      return false;
    }
    let component = page.path === '/changelog' ? require('./pages/changelog.vue') : require(`./views/alert.vue`);
    if (page.path === '/edit') {
      component = require('./views/edit.vue');
    }
    let com = component.default || component;
    let child = {
      path: page.path.slice(1),
      meta: {
        title: page.title || page.name,
        description: page.description
      },
      component: com
    };
    route[0].children.push(child);
  }
  //if (config && config.length>0) {
  config.map(nav => {
    if (nav.groups) {
      nav.groups.map(group => {
        group.list.map(page => {
          addRoute(page);
        });
      });
    } else if (nav.children) {
      nav.children.map(page => {
        addRoute(page);
      });
    } else {
      addRoute(nav);
    }
  });
  //}
  return { route, navs: config };
};

const myroute = registerRoute(navConfig);

let guideRoute = {
  path: '/guide',
  name: 'Guide',
  redirect: '/guide/design',
  component: require('./pages/guide.vue'),
  children: [{
    path: 'design',
    name: 'Design',
    component: require('./pages/design.vue')
  }, {
    path: 'nav',
    name: 'Navigation',
    component: require('./pages/nav.vue')
  }]
};

let resourceRoute = {
  path: '/resource',
  name: 'Resource',
  component: require('./pages/resource.vue')
};

let indexRoute = {
  path: '/',
  name: 'Home',
  component: require('./pages/index.vue')
};

let dynaRoute = registerRoute(dynamicRouterConfig).route;

myroute.route = myroute.route.concat([indexRoute, guideRoute, resourceRoute]);

myroute.route.push({
  path: '*',
  component: require('./docs/home.md')
});

export const navs = myroute.navs;
export default myroute.route;

And dynamic.router.js:

module.exports = [
  {
    "name": "Edit",
    "path": "/edit"
  }
]

Now the static route config is woking fine ,but how can I load data from server side by ajax request in the route.config.js instead of static data.

I dont fully understand your question. Where do you fire your ajax request? Perhaps you should paste some code — Psi

JJPandari JJPandari · Accepted Answer · 2016-11-03T14:35:25

Waiting for some async request at page render is fine, just set empty initial values in the data section of component like:

data() {
    someStr: '',
    someList: []
}

and make sure you handle the empty values well without undefined errors trying to read things like someList[0].foo.
Then when the request comes back, set the initially empty values to those real data you get from the request.

Giving the user some visual indicate that you're fetching the data would be a good practice. I've found v-loading in element-ui useful for that.

Vue-router dynamic load menu tree

1 Answers