vue中引入html静态页面

~犇犇~

已于 2022-05-13 11:42:27 修改

阅读量1.1w

点赞数 3

文章标签： vue.js elementui html

于 2022-01-06 15:17:45 首次发布

本文链接：https://blog.csdn.net/qq_29124867/article/details/122343330

版权

功能：系统中需增加帮助中心页面，由于页面较长，需要实现锚点定位跳转。

1、开始用的路由方式，首先在router文件夹index.js里面配置静态路由，代码如下

{
		path: '/help',
		component: () => import('@/page/help'),
		hidden: true,
	}


//页面代码
<div class="top_help" @click="jumpTo('/help')">帮助中心</div>

jumpTo(url){
      this.$router.push({path:url})
}

2、给页面标签加锚点，代码如下，发现锚点实现了，可是页面路由变了,比如点击标题2时，页面路由变成http://localhost:8081/#/two,再刷新页面时会找不到该页面。

<ul class="help_list" >
         <li :class="n==1?'active':''" @click="n=1"><a href="#one"><span>标题1</span></a></li>
         <li :class="n==2?'active':''" @click="n=2"><a href="#two"><span>标题2</span>
            <dl>
               <dd
               v-for="(item, index) in contractList"
               :key="index"
               :class="m==index?'now':''" @click="m=index"><a :href="`#two${index+1}`">{{item}}</a></dd>
            </dl>
         </a>
         </li>
 </ul>

<div class="help_next" id="one">
      <div class="help_box" v-show="n==1" >
        <div class="help_tit"><img src="@/assets/images/help/tit_1.png"></div>
        <div class="help_img help_martop">
          <img src="@/assets/images/help/tab1_bg.png">
        </div>
      </div>
    </div>
    <div class="help_next" id="two">
      <div class="help_box" v-show="n==2">
        <div class="help_tit"><img src="@/assets/images/help/tit_2.png"></div>
        <div class="help_img help_martop">
          <p id="two1"><img src="@/assets/images/help/tab2_1.png"></p>
          <p id="two2"><img src="@/assets/images/help/tab2_2.png"></p>
          <p id="two3"><img src="@/assets/images/help/tab2_3.png"></p>
          <p id="two4"><img src="@/assets/images/help/tab2_4.png"></p>
        </div>
      </div>
      </div>
    </div>

data(){
    return {
      n:1,
      m:0,
      contractList:['标题1','标题2','标题3','标题4'],
    }
  },

换种方式用监听滚动事件实现动态锚点，获取需要滚动的距离,可能个人技术有限，最终也没有实现。so，用vue页面不是那么的好，网上搜了一些方法也没有实现，由于时间问题，就放弃这种方法了。再者帮助说明，需要打开新的标签页才行，最后就用html来做。

3、在static里面新增index.html页面，新建css，images，js文件夹，

4、在vue页面写以下代码，跳转到html页面

<div class="top_help"><a href="../../../../static/index.html" target="_blank">帮助中心</a></div>

5、发版到测试环境，发现图片和样式无法加载，需要把图片和样式路径修改,

把../css/index.css改成/static/css/index.css

<link rel="stylesheet" href="/static/css/index.css">
<script type="text/javascript" src="/static/js/jquery.min.js"></script>

<body>
    <div class="help_bg" ref="box">
      <div class="help_topbg"><img src="/static/images/topbg.png"></div>
    </div>
</body>

6、webpack中config配置文件

// copy custom static assets
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.build.assetsSubDirectory,
        ignore: ['.*']
      }
    ])

5、点击就可以跳转新的页面，并且锚点问题也解决了，顺带贴个点击菜单，给菜单加当前样式

$(document).ready(function(){
      $(".help_list .yiji").each(function(){
        $(this).click(function(){
          $(".help_list .yiji").parent().removeClass("active");
          $(this).parent().addClass("active");
        });
      });
});

~犇犇~

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
2
评论
vue中引入html静态页面

功能：系统中需增加帮助中心页面，由于页面较长，需要实现锚点定位跳转。1、开始用的路由方式，首先在router文件夹index.js里面配置静态路由，代码如下{ path: '/help', component: () => import('@/page/help'), hidden: true, }//页面代码<div class="top_help" @click="jumpTo('/help')">帮助中心</div>jumpTo(url
复制链接

扫一扫