时间戳

首页 > 解决方案 > 有没有办法使用 Vue 路由器路由到 html 文件？

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 文件？

标签： htmlvue.jsvue-componentrobotframeworkvue-router

解决方案

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

推荐阅读