有没有一种方法可以使用Vue路由器路由到html文件?

本文介绍了有没有一种方法可以使用Vue路由器路由到html文件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

您好，我正在使用VueJS和webpack模板.我有很多组件，可以通过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
    }
  ]
})

是否可以使用Vue Router路由到HTML文件?

推荐答案

首先，您需要 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 }
}