首页 > 解决方案 > 调用接口后跳转路由

问题描述

调用接口后尝试用vue-router跳转路由。在本地环境下可以正常工作,但是打包后路由正常跳转但是显示一个空白页面,好像是组件没有正常加载。

这是我动态加载路线的代码。

export function loadPage(url,para,tabTile) {
  var newUrl=url.replace('/', '-');
  var name=newUrl+"$"+ Math.floor(Math.random ()*1000);
  var havTab=false;
  if(tabTile==null || tabTile==''){
     tabTile="tab";
  }
  //var havTab=isHaveTab(name)
   //if(!havTab){
      var tab = {
          menuId: name,
          name: name,
          title: tabTile,
          type:  "module",
          iframeUrl: ""
         };
        store.commit("common/updateMainTabs",store.state.common.mainTabs.concat(tab));
        //store.state.common.mainTabs = store.state.common.mainTabs.concat(tab);
        store.commit("common/updateMainTabsActiveName",tab.name);
        //store.state.common.mainTabsActiveName = tab.name;
  // }

 //rotue
 //get the main route
  var mainRoutes=null;
   for (var i = 0; i < router.options.routes.length; i++) {
      var tmp=router.options.routes[i];
      if(tmp.name=='main-dynamic'){
        mainRoutes=tmp;
        break;
      }
   }
  var routes=mainRoutes.children;
  //Determine whether the route exists
 var  flag=isHaveRoute(routes,newUrl)
   if(!flag){
     var route = {
         path: name,
         component: require('@/views/modules/'+url+'.vue').default||null,
         name: name,
         meta: {
           menuId: name,
           title:  name,
           name:  name,
           isDynamic: true,
           isTab: true,
           iframeUrl: ''
         }
       }
     routes.push(route)
     mainRoutes.children = routes
     router.addRoutes([
       mainRoutes,
       { path: '*', redirect: { name: '404' } }
     ])
   }

 router.push({ name: name,params:para})
 }

标签: javascriptvue.js

解决方案


你在使用 Vue Router 的历史模式吗?如果是这样,您需要配置您的 Web 服务器以正确地将请求重定向到index.html

文档可在此地址获得


推荐阅读