有没有一种方法可以使用Vue路由器路由到html文件? [英] Is there a way to route to html files with Vue router?
问题描述
您好,我正在使用VueJS和webpack模板.我有很多组件,可以通过Vue Router轻松显示.但是,我的组织使用Robot Framework进行测试,我们使用以下命令生成HTML页面:
Hello I am using VueJS and the webpack template. I have a bunch of components I can easily display with Vue Router. However, my organization uses Robot Framework for testing and we generate an HTML page using the command:
python -m robot.testdoc /tests/directory /destination.html
这基本上是我使用路由器的方式:
This is basically how I am using the router:
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文件?
Is there a way to route to an HTML file using Vue Router?
推荐答案
首先,您需要 html-loader
:
yarn add html-loader | npm install html-loader
然后,您需要更新 webpack.config.js
文件,并将条目添加到 rules
中以处理 .html
扩展名:
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"
}
}
然后,您可以像导入组件一样导入 .html
文件:
Then you can import your .html
files like you would components:
import Destination from '/path/to/destination.html'
现在将 component
视为对象,并利用 template
属性提供静态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 }
}
这篇关于有没有一种方法可以使用Vue路由器路由到html文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!