Question

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

这是我的代码（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请求而不是静态数据从服务器端加载数据。

Answer 1

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

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

并确保在没有undefined错误的情况下处理空值，尝试阅读someList[0].foo之类的内容。
然后，当请求返回时，将最初为空的值设置为从请求中获得的实际数据。

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

Vue-router动态加载菜单树

1 个答案: