[英]Vue router dynamic component
我對vue-router感到有些困惑,因為我不知道該怎么辦了,找不到適合我的東西,我不確定它是否適用於舊版本或其他版本。
我的問題:我有一個適用於2個不同網站的Vue應用程序,例如: example.nl和example.be 。 現在,對於兩個站點,我都有一個siteId。 我可以從vuex獲取該ID。
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));
但這給了我一個語法錯誤。
任何想法都很好
我可能會為您提供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');
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.