Как добавить компонент в Vue Router?

Question

[andreyAmaterasu]

Работаю над веб-приложением на Django, к шаблонам подключил Vue.js. В данном случае одностраничное приложение, при нажатии на кнопку содержимое страницы должно меняться. В документации указано, что в качестве темплейта можно указать файл. Можно ли указать html файл, чтобы при нажатии на кнопку происходил рендеринг содержимого html файла, если да, то как это можно сделать?

Comments

[Михаил]

А у вас Vue приложение отдельно или вы его в ваш backend пытаетесь добавить через теги script?
Потому что если отдельно, то такие SPA приложения собираются вебпаком, это он уже умеет из отдельных файлом импортировать код компонентов

Answer 1

[Ilya Dyomin]

1. Для начала необходимо установить html-loader и сконфигурировать Webpack:

yarn add html-loader | npm install html-loader

{
    test: /\.(html)$/,
    exclude: /(node_modules)/,
    use: {
      loader: "html-loader"
    }
}

2. Импортировать .html файл в роутер.

import Destination from '/path/to/destination.html'

3. Теперь можно использовать .html файл в качестве шаблона.

{
  path: '/destination',
  mode: history,
  name: 'destination',
  component: { template: Destination }
}

Ответ с Stack Overflow.