Vue路由器动态组件

loading...


0

我在某些部分遇到了vue-router,我不知道该怎么办,无法找到任何可行的方法,我不确定它是否适用于旧版本或其他东西 .

My problem: 我有2个不同网站的Vue应用程序,例如:example.nl和example.be . 现在,对于这两个站点,我都有一个siteId . 我可以从vuex那里得到那个id .

const siteId = store.getters.siteId;

现在基于siteId我想在路由上加载一个组件 .

Example

import {store} from '@/plugins/vuex_store';

const siteId = store.getters.siteId;
import test from 'nl/test'; 


if(siteId === 2) {
    import test from 'be/test'; <-- thows error 'statement expected'.
}

let router = ({
    path: 'exmaple',
    name: 'example',
    component: test,
});

export default router;

我尝试了几件事:

import("nl/test").then(foo => console.log(foo.default));

但这给了我一个语法错误 .

任何想法都会很好

loading...

1回答

  • 1

    我可能有3个解决方案 . 我自己不确定解决方案2 .

    const siteId = store.getters.siteId;
    let loadSite = () => import ('nl/test'); 
    
    
    if(siteId === 2) {
        loadSite = () => import ('be/test'); 
    }
    
    let router = ({
        path: 'exmaple',
        name: 'example',
        component: loadSite,
    });
    

    要么

    const siteId = store.getters.siteId;
    const loadSite1 = () => import ('nl/test'); 
    const loadSite2 = () => import ('be/test'); 
    
    let router = ({
        path: 'exmaple',
        name: 'example',
        component: (siteId === 1) ? loadSite1 : loadSite2,
    });
    

    要么

    const loadSite1 = () => import ('nl/test'); 
        const loadSite2 = () => import ('be/test'); 
    
        let router = ({
            path: 'example',
            name: 'example',
        }, {
            path: 'site1',
            name: 'site1',
            component: loadSite1,
        }, {
            path: 'site2',
            name: 'site2',
            component: loadSite2,
        });
    
    router.beforeEach((to, from, next) => {
       if (to.path.example === 'example') {
          if(store.getters.siteId === 1) return next('site1');
          else if(store.getters.siteId === 2) return next('site2');
       }
    }
    
评论

暂时没有评论!