如何在 vuejs 中加载 html 模板答案

【问题标题】：How load html template in vuejs如何在 vuejs 中加载 html 模板
【发布时间】：2020-01-04 19:37:58
【问题描述】：

我使用 vue.js 和 vue-router.js。我将这两个文件都添加到了 html 页面中

这是我的加载模板组件... const Dashboard = {template: "<strong>"}

但我想通过 HTTP URL 动态加载 html 页面。 const Dashboard = {template: "How load html page with url(http)"}

谁能指导我？

【问题讨论】：

标签： html vue.js templates

【解决方案1】：

你可以定义一个类似的组件

Vue.component('dynamic-component', {
    props: {
        contentURL: String,
    },
    template: `<div v-html='inner_html'></div>`,
    computed: {
        inner_html() {
            return // http call to get html value utilizing this.contentURL
        },
    },
});

然后从路由器

{
    path: '/path/option-a',
    components: {
        DynamicComponent
    },
    props: {
        contentURL: `https://some-resource/option-a`
    }
},
{
    path: '/path/option-b',
    components: {
        DynamicComponent
    },
    props: {
        contentURL: `https://some-resource/option-b`
    }
}

【讨论】：

是的，这似乎是正确的方法。我原以为会在一些 Vue 资源、示例、组件等网页中找到它……可惜没有 Vue “stdlib”
btw... axios.get() 总是一个 Promise，不是吗？
@arivero 是的，我只是在 http 调用中存根，我不知道 OP 使用 axios 所以我使用删除它

【解决方案2】：

创建层，可以创建vue组件，使用slot

布局.vue

<template>
  Header
  AnyComponents
  <slot />
  Footer
</template>

在你的页面组件中你应该导入你的布局并换行

MainPage.vue

<template>
  <MainLayout>
    Here is your conntent of page or router
    <router-view />
  </MainLayout>
</template>

<script>
import MainLayout from 'layout.vue';

export default {
  components: {
    MainLayout
  }
}
</script>

现在要渲染你的页面，你应该在路由器中使用你的页面

router.js 示例

import Vue from 'vue';
import Router from 'vue-router'

import MainPage from 'MainPage.vue';

Vue.use(Router)

export default new Router({
  routes: [{
    path: '/',
    component: MainPage,
  }]
})

【讨论】：

【解决方案3】：

如果您想在页面中插入 html，请使用 v-html

<div class="content" v-html="dashboard.template">
</div>

【讨论】：

不...我想通过 url 在中进行布局并加载 html 模板