How to add a component to Vue Router?

Question

Vue.js

I am working on a Django web application, I connected Vue.js to the templates. In this case, a single-page application, when you click on the button, the page content should change. The documentation states that you can specify a file as a template. Is it possible to specify an html file so that when the button is clicked, the contents of the html file are rendered, if so, how can this be done?

Answer 1

1. First you need to install html-loaderand configure Webpack:
yarn add html-loader | npm install html-loader

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

2. Import .htmlthe file into the router.

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

3. Now you can use the .htmlfile as a template.

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

Answer from Stack Overflow.