Есть ли способ для маршрутизации в HTML-файлы с помощью маршрутизатора Vue?

Question

Здравствуйте, я использую VueJS и шаблон веб-пакета. У меня есть куча компонентов, которые я могу легко отобразить с помощью Vue Router. Однако моя организация использует Robot Framework для тестирования, и мы генерируем HTML-страницу с помощью команды:

python -m robot.testdoc /tests/directory /destination.html

Вот как я использую роутер:

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main.vue'
import Component1 from '@/components/Component1.vue'
import Component2 from '@/components/Component2.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      mode: history,
      name: 'Main',
      component: Main
    },
    {
      path: '/component1',
      mode: history,
      name: 'Component1',
      component: Component1
    },
    {
      path: '/component2',
      mode: history,
      name: 'Component2',
      component: Component2
    }
  ]
})

Есть ли способ перенаправить файл HTML с помощью Vue Router?

Answer 1

Сначала вам понадобится html-loader:

yarn add html-loader | npm install html-loader

Затем вам нужно обновить webpack.config.js файл и добавить запись в ваш rules для обработки .html расширений:

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

Затем вы можете импортировать файлы .html, как если бы вы составляли:

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

Теперь обрабатывайте component как объект и используйте свойство template для обслуживания статических файлов HTML:

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