Динамический компонент маршрутизатора Vue - PullRequest
Новая
       7

Динамический компонент маршрутизатора Vue

0 голосов
/ 10 декабря 2018

Я застрял с vue-router в какой-то части, которую я больше не знаю, что делать, и не могу найти ничего, что могло бы мне помочь, я не уверен, подходит ли оно для более старых версий или что-то еще.

Моя проблема: У меня есть приложение Vue для 2 разных веб-сайтов, например: example.nl и example.be .Теперь для обоих сайтов у меня есть siteId.Я могу получить этот идентификатор от Vuex.

const siteId = store.getters.siteId;

Теперь на основе siteId я хочу загрузить компонент по маршруту.

Пример : 

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));

Но это дает мне синтаксическую ошибку.

Любые идеи были бы хорошими

1 Ответ

0 голосов
/ 10 декабря 2018

У меня может быть 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');
   }
}
...