有没有办法使用 Vue 路由器路由到 html 文件?

沃梦达教程前端问题

2022-01-01 15

Is there a way to route to html files with Vue router?(有没有办法使用 Vue 路由器路由到 html 文件?)

本文介绍了有没有办法使用 Vue 路由器路由到 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
    }
  ]
})

Is there a way to route to an HTML file using 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 }
}

这篇关于有没有办法使用 Vue 路由器路由到 html 文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！

沃梦达教程

本文标题为：有没有办法使用 Vue 路由器路由到 html 文件?

上一篇：从 rest api 填充 Vue 模板组件中的表

下一篇：从 websocket 监听器发出全局事件

基础教程推荐

学习HTML

学习jQuery

学习Laravel

学习CSS3

学习Vue.js

学习Bootstrap5

学习ThinkPHP

学习AJAX