Vue-router 动态加载菜单树答案

【问题标题】：Vue-router dynamic load menu treeVue-router 动态加载菜单树
【发布时间】：2017-03-15 11:43:23
【问题描述】：

我正在尝试通过 ajax 请求创建带有 vue-router 的菜单树，但是在 ajax 请求响应之前调用了 $mount 函数，因此 Vue 实例中的路由器始终为空。这里有什么好的解决办法吗？

这是我的代码（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;

还有dynamic.router.js：

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

现在静态路由配置工作正常，但是如何通过 route.config.js 中的 ajax 请求而不是静态数据从服务器端加载数据。

【问题讨论】：

我不完全理解你的问题。你在哪里触发你的ajax请求？也许你应该粘贴一些代码

标签： vue.js vue-router

【解决方案1】：

在页面渲染时等待一些异步请求很好，只需在组件的data 部分设置空初始值，例如：

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

并确保在尝试读取 someList[0].foo 之类的内容时不会出现 undefined 错误。
然后，当请求返回时，将最初的空值设置为您从请求中获得的真实数据。

为用户提供一些视觉指示，表明您正在获取数据，这将是一种很好的做法。我发现 element-ui 中的 v-loading 对此很有用。

【讨论】：