Vue3项目中引入html页面的方法举例

更新时间：2023年09月22日 10:48:25 作者：花树最爱猫

这篇文章主要给大家介绍了关于Vue3项目中引入html页面的相关资料,Vue3是一个JavaScript框架,通常我们使用它来构建单页应用程序(SPA),如果你想在HTML页面中使用Vue3,可以参考这篇文章,需要的朋友可以参考下

前言

Vue3项目中引入html页面，通常是需要实现跳转加载html页面的功能。之前为了实现需求查找解决方法时多数推荐使用iframe标签实现，尝试后发现iframe是将html页面嵌入到vue中，不符合自身的需求。总结方法如下：

1.导入文件

将需要导入的文件（单个文件或是项目）放置于public/static目录下，如图：

2.添加跳转链接

需要跳转的位置添加跳转链接，推荐两种方式代码如下：

 <a href="./static/show.html" rel="external nofollow" >跳转</a>
 <el-button onclick="location.href='./static/show.html'">跳转</el-button>

3.html文件编辑

（1）如果是现有的文件，不需进行编辑，则直接引入即可，如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>引入的html文件</h1>
    <img src="../static/img/sea.jpg" alt="" />
  </body>
</html>

（2）若在html页面中使用vue项目封装的方法，或是获取后台数据，原生的Ajax不方便时可使用axios来实现，代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>{{data.name}}</h1>
      <img src="../static/img/sea.jpg" alt="" />
    </div>
  </body>
</html>
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
<script>
  const { createApp, reactive, getCurrentInstance } = Vue;
  const app = createApp({
    setup() {
      const data = reactive({
        name: "aa",
      });
      getInformation();
      //方法1
      function getInformation() {
        //方法的实现
        data.name = "引入的html文件";
      }
      //  方法2
      const handleClick = (val) => {
        //方法的实现
      };
      return {
        data,
        handleClick,
      };
    },
  });
  app.mount("#app");
</script>

注意：添加id是必不可少的，id值可以按照自己的想法来修改。

总结

到此这篇关于Vue3项目中引入html页面的文章就介绍到这了,更多相关Vue3引入html页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue 事件获取当前组件的属性方式
这篇文章主要介绍了vue 事件获取当前组件的属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
面试官常问Vue和React区别解析
Vue和React都是流行的前端框架,它们有很多相似之处,如组件化和使用虚拟DOM,但是,它们在设计理念、组件存在形式、diff优化和中文文档方面存在一些不同,这篇文章给大家介绍面试官常问Vue和React区别,感兴趣的朋友一起看看吧
2025-02-02
Vue3中的defineExpose函数用法深入解析
这篇文章主要介绍了Vue3中的defineExpose函数用法的相关资料,defineExpose是Vue3中用于在模式下暴露组件内部属性和方法的辅助函数,它允许父组件通过ref访问子组件的暴露内容,提高组件间的交互能力并保持封装性,需要的朋友可以参考下
2025-01-01
深入浅析Vue中的 computed 和 watch
computed 计算属性是通过属性计算得来的属性，watch属性变化，就会触发监听的函数。下面通过本文给大家介绍Vue中的 computed 和 watch，感兴趣的朋友一起看看吧
2018-06-06
vue的style绑定background-image的方式和其他变量数据的区别详解
今天小编就为大家分享一篇vue的style绑定background-image的方式和其他变量数据的区别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue.js中数组变动的检测详解
这篇文章给大家主要介绍了Vue.js中数组变动的检测，文中给出了详细的示例代码和过程介绍，相信会对大家的理解和学习很有帮助，有需要的朋友们下面来一起看看吧。
2016-10-10
vue实现微信分享链接添加动态参数的方法
这篇文章主要介绍了vue微信分享链接添加动态参数的实现方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-04-04
vue的index.html中获取环境变量和业务判断图文详解
这篇文章主要给大家介绍了关于vue的index.html中获取环境变量和业务判断的相关资料,对vue来说index.html是一个总的入口文件,vue是单页面应用,挂在id为app的div下然后动态渲染路由模板,需要的朋友可以参考下
2023-09-09
在uniapp中实现图形验证码的详细步骤
图形验证码是一种常见的安全措施,用于防止自动化软件（机器人）滥用网站资源,如自动提交表单,这篇文章主要介绍了在uniapp中实现图形验证码的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-11-11
Vue3学习之表单的使用示例详解
这篇文章主要为大家详细介绍了Vue3中表单的使用的相关知识，文中的示例代码讲解详细，对我们掌握Vue3有一定的帮助，感兴趣的小伙伴可以跟随小编一起学习一下
2022-12-12