Vuejs 如何使用多个模板

一尘不染

Vuejs 如何使用多个模板

javascript

我想为管理面板网站使用不同的组件。我试试看；

// App.vue
<template>
    <PanelTemplate v-if="$route.meta.template == 'panel'"/>
    <WebsiteTemplate v-if="$route.meta.template == 'website'"/>
</template>

<script>
import PanelTemplate from './templates/PanelTemplate.vue'
import WebsiteTemplate from './templates/WebsiteTemplate.vue'
export default {
    components : {
        PanelTemplate,
        WebsiteTemplate
    }
}
</script>

// Router.js
  {
    path: "/panel/dashboard",
    name : "panel-index",
    component: PanelView,
    meta : { template : 'panel' }
  },
  {
    path : "/",
    name : "website-index",
    component : WebsiteView,
    meta : { template : 'website' }
  },

// PanelTemplate.vue - WebsiteTemplate.vue
<template>
    <router-view></router-view>
</template>

但这行不通。我也尝试component tag过，但这也不起作用。我看到的只是白屏，两个组件都没有调用。我应该怎么办？

阅读 116

2022-07-26

共1个答案

一尘不染

router-view标签应该存在于模板组件之一中App.vue并由模板组件之一包装：

<template>
    <component :is="currentTemplate">
        <router-view></router-view>
    </component>
</template>

<script>
import PanelTemplate from './templates/PanelTemplate.vue'
import WebsiteTemplate from './templates/WebsiteTemplate.vue'
export default {
    computed:{
     currentTemplate(){
        return this.$route.meta.template
     }
    },
    components : {
        PanelTemplate,
        WebsiteTemplate
    }
}
</script>

2022-07-26