Блог

Главная - Вопросы по программированию - Как использовать маршрутизатор VUE с собственными элементами HTML в качестве компонентов?

Как использовать маршрутизатор VUE с собственными элементами HTML в качестве компонентов?

#vue.js #vue-router

#vue.js #vue-router

Вопрос:

Я в этой ситуации:

  • старый проект, компилятор npm / vue недоступен
  • использование vue в vanilla JS flavor
  • используя маршрутизатор, для которого нужны компоненты
  • не хотите использовать вонючие введенные строки, которые действительно плохо влияют на читаемость кода

Как я могу использовать фрагменты html в качестве компонентов для vanilla JS vue?

Комментарии:

1. Возможно, заголовок может быть «Как использовать маршрутизатор Vue с Vanilla JS», поскольку использование шаблона vanilla JS HTML — это первое, что обсуждается в документах

2. исправлено, но дело в том, что в документах указано только использование маршрутизатора с введенными строковыми шаблонами, я бы хотел избежать этого подхода, поскольку собственные шаблоны html лучше (как это делает скомпилированный vue)

Ответ №1:

Я нашел совершенно недокументированное решение для создания ванильных компонентов JS с собственным HTML:

1 Чистый HTML (без вонючих введенных строк):

    <div id="components" style="display:none"><!--hide component code-->
        <div id="component-category-index"><!--component 1 source code-->
            CATEGORY INDEX COMPONENT
        </div>
        <div id="component-article-show"><!--component 2 source code-->
            ARTICLE SHOW COMPONENT
        </div>
    </div>

2 инициализация vanilla JS Vue:

 const vue=new Vue({
    el: '#vue-app',
....your vue blabla.....
    router:new VueRouter({
        routes :[
            { path: '/article', component: { template: document.getElementById('component-article-show').outerHTML } },
            { path: '/categories', component: { template: document.getElementById('component-category-index').outerHTML } }
        ]
    })
})

плюсы:

  1. используйте vanilla JS vue с полными функциональными возможностями компонентов
  2. разделяйте vue «style-component-logic», но в одном файле, не нарушая этот чистый и простой шаблон

минусы:

весь HTML страницы должен быть в одном файле, поэтому это решение подходит для небольших SPA или отдельных страниц с VUE.