【vue】在vue项目直接使用html文件

最新推荐文章于 2024-12-31 16:31:28 发布

原创最新推荐文章于 2024-12-31 16:31:28 发布 · 9.5k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#vue中直接使用html文件 #跳转html文件 #vue

vue工作专栏收录该内容

26 篇文章

订阅专栏

本文介绍了在Vue.js项目中如何设置公共目录，并通过Vue原型对象和mixin方法，实现在前端页面内跳转到本地的HTML文件。主要步骤包括在public目录创建HTML文件夹，配置main.js中的访问路径，以及在Vue组件中利用window.open方法进行跳转。

1.在public目录中新建html文件夹，放入html文件

2.在main.js加入访问路径

Vue.prototype.$publicURL = './';

3.在vue组件中使用跳转

<a href="javascript:void(0)" @click="jumpOutsideLink(`${$publicURL}html/xxxx.html`,'xxxx协议')">《xxxx协议》</a>


//mixin中方法
使用window.open进行跳转
/**
 * 跳转外部链接文件
 * 仅前端内部文件
 * @param { 路径 } url
 * @param { 文件名 } fileName
 */
export const jumpLink = {
    methods:{
        jumpOutsideLink(url,fileName){
            window.open(url,fileName);
        }
    }
}