让前端飞微信小程序开发码农的世界

navigateTo:fail page "pages

2019-02-28  本文已影响6人  honey缘木鱼

在vue.js项目转化到mpvue的小程序项目的过程中,执行事件时,报了如下图所示的错误:



找出报错代码:

 <div class="purchase" @click="selectColor('1')">
        <a href="javascript:void(0);" >立即购买</a>
      </div>

原因是:用a标签时,用到了href="javascript:void(0);",在vue.js有路由进行跳转,href="javascript:void(0);"这种写法代表禁止超链接跳到另一个地址,但是在mpvue中,可用a标签实现页面跳转,所以以上的写法不可行。

解决方案: 把href="javascript:void(0);"去掉即可!

 <div class="purchase" @click="selectColor('1')">
        <a >立即购买</a>
      </div>

最后普及下为什么使用href="javascript:void(0);"在a标签中,及具体含义?

为什么要使用href=”javascript:void(0);”?

javascript:是伪协议,表示url的内容通过javascript执行。void(0)表示不作任何操作,这样会防止链接跳转到其他页面。这么做往往是为了保留链接的样式,但不让链接执行实际操作。

<a href="javascript:void(0)" onClick="window.open()"> 点击链接后,页面不动,只打开链接

href=”javascript:void(0);”与href=”#"的区别

<a href="javascript:void(0)">点击</a>点击链接后不会回到网页顶部 <a href="#">点击</a> 点击后会回到网面顶部

"#"其实是包含了位置信息,例如默认的锚点是#top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首
而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)

使用javascript的方法

<a href="#" onclick="javascript:方法;return false;">文字</a>

<a href="javascript:void(0)" onclick="javascript:方法;return false;">文字</a>

补充 <a href="javascript:hanshu();"这样点击a标签就可以执行hanshu()函数了。

上一篇 下一篇

猜你喜欢

热点阅读