VUE2-根据商店值更改路线

Question

我正在尝试根据Vuex商店中保存的值更改组件的路由。有四个不同的模板文件，保存在不同的目录中（Template1，Template2等）。我正在从详细信息存储中提取模板ID，并取决于此值，希望从正确的目录呈现组件。

例如，如果商店中的模板值为2，则加载所有template2/profile组件，如果是三个加载template3/profile component。

import VueRouter from 'vue-router'
import store from '../store';


Vue.use(VueRouter)

const setComponent = componentName => {
    return () => import(`../template${store.getters['detailsStore/getTemplate']}/views/${componentName}`)
}

const routes = [
    {
        path: '/',
        redirect: '/details'
    },
    {
        path: '/profile',
        name: 'Profile',
        //component: () => import('../template2/views/Profile') // - this is how i was importing the component but couldn't access vuex store
        component: () => setComponent('Profile'),
    },
    {
        path: '/details',
        name: 'Details',
        component: () => setComponent('Details'),
    }
];

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

我认为创建setComponent函数会有所帮助。但是我只有一个空白页。任何帮助将不胜感激

Answer 1

VUE2：

您的组件未完成加载。这将做到这一点：

const asyncComp = async (componentName) => {
  const component = await import(`../template${store.getters['detailsStore/getTemplate']}/views/${componentName}`)
  return component;
};


{
  path: '/profile',
  name: 'Profile',
  component: () => asyncComp('Profile'),
}

VUE 3解决方案：
在这里，您将拥有可用的DefereSyncomponent（）
https://vuejs.org/api/papi/gapi/general.html.html #html#defneasyneasyneasyneasyneasynccomponent

const asyncComp = (compName) => defineAsyncComponent(() => import(`../template${store.getters['detailsStore/getTemplate']}/views/${compName}`);