Question

我正在从事一个项目，该项目可以根据特定条件使用多个主题/布局。我有一个仪表板面板，其中有5个五个预先构建的主题，管理员一次可以选择某个主题，并根据该部分显示前端视图，假设管理员选择ThemeOne，则路由器将仅使用ThemeOne组件，

route.js

const selectedTheme = 'themeTwo'
import Vue from 'vue'

import Router from 'vue-router'

import Home from './views/'+ selectedTheme + '/Home.vue'

import About from './views/'+ selectedTheme + '/About.vue'


Vue.use(Router)

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            component: About
        }
    ]
})

请帮助... Like this

Answer 1

您可以通过延迟加载来实现：

...
export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('./views/'+ selectedTheme + '/Home.vue')
        },
        {
            path: '/about',
            name: 'about',
            component: () => import('./views/'+ selectedTheme + '/About.vue')
        }
    ]
})

您还可以使用函数选择组件：

...
function setComponanet(componentName){
    return () => import('./views/'+ selectedTheme +'/'+ componentName +'.vue')
}

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/',
            name: 'home',
            component: setComponanet('Home'))
        },
        {
            path: '/about',
            name: 'about',
            component: setComponanet('About')
        }
    ]
})

如果您不想在导入中使用动态路径，则可以在函数中使用swtich

function setComponanet(componentName){
    if(selectedTheme == themeOne)
    {
        switch(componentName){
            case 'Home': return () => import('./view/themeOne/Home');
            case 'About': return () => import('./view/themeOne/About');
            default: return () => import('./view/themeOne/NotFount');
        }
    }
    else if(selectedTheme == themeTwo)
    {
        switch(componentName){
            case 'Home': return () => import('./view/themeTwo/Home');
            case 'About': return () => import('./view/themeTwo/About');
            default: return () => import('./view/themeTwo/NotFount');
        }
    }
}

动态路线的另一种方法是使用功能组件

...
export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/:theme/:compName',
            name: 'theme',
            component: Theme
            props: (route)=>({ selectedComp: route.params.theme + route.params.compName }) //selectedComp: themeOneHome
        }
    ]
})

// in Theme.vue

import themeOneHome from './themeOne/Home'
import theOneAbout from './themeOne/About'
import themeTwoHome from './themeTwo/Home'
import theTwoAbout from './themeTwo/About'

const components = {
  themeOneHome,
  themeOneAbout,
  themeTwoHome,
  theTwoAbout
}
export default {
  functional: true,
  props: ['selectedComp'],
  render(h, ctx) {
    return h(components[ctx.props.selectedComp], ctx.data, ctx.children)
  }
}

Answer 2

您可以将所有主题加载到组件中，并基于变量加载主题。

然后，您可以创建任何方式来选择主题。例如，您可以创建一个下拉列表。

<template>
    <component :is="themeSelector"></component>
</template>

<script>
    import fooTheme from 'fooTheme'
    import fooTheme2 from 'fooTheme2'
    import fooTheme3 from 'fooTheme3'

    export default {
        name: 'fooParent',
        components: {
            fooTheme,
            fooTheme2,
            fooTheme3,
        },
        data: function() {
            return {
                themeSelector: 'fooTheme2'
            }
        }
    }
</script>

有什么方法可以在vuejs路由器中加载动态组件吗？

2 个答案: