Is there a way to route to html files with Vue router?
First you'll need html-loader
:
yarn add html-loader | npm install html-loader
Then you need to update your webpack.config.js
file and add an entry to your rules
to handle .html
extensions:
{
test: /\.(html)$/,
exclude: /(node_modules)/,
use: {
loader: "html-loader"
}
}
Then you can import your .html
files like you would components:
import Destination from '/path/to/destination.html'
Now treat component
as an Object and leverage the template
property to serve static HTML files:
{
path: '/destination',
mode: history,
name: 'destination',
component: { template: Destination }
}
1.install html-loader
npm install --save-dev html-loader
2.use below code vue.config.js or Webpack.config.js
For webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.html$/i,
loader: 'html-loader',
},
],
},
};
For Vue cli users vue.config.js
module.exports = {
chainWebpack: config => {
config.module
.rule('html')
.test(/\.html$/)
.use('html-loader')
.loader('html-loader')
}
}
just add router in your
{
path: '/print',
name: 'print',
component: () => import('../pages/print.html'),
},
more about vue https://cli.vuejs.org/guide/webpack.html#replacing-loaders-of-a-rule