进入页面跳转到指定锚点

问题

在Vue实例完成之后,将锚点定位到指定元素。

分析:

如何实现,这是一个问题。首先生命周期函数,放在created钩子中,这个时候页面还没有渲染完成,如果进行锚点跳转,很可能就无法跳转到指定位置。因此只能放在生命周期钩子mounted中。

但是,如果直接使用location.hash也是有可能无法正常跳转,因此,要保证正常跳转,就要把跳转锚点的代码放在事件队列的最好,这个时候就要使用setTimeout(() => {}, 0)了。

解决方案:

  1. 在生命周期钩子mounted写代码
  2. 将跳转锚点的代码放在事件队列的最后

代码实现

  var vm = new Vue({
    el: ‘#app‘,
    mounted() {
      setTimeout(function () {
        location.hash = ‘item4‘
      }, 0)
    }
  })

原文地址:https://www.cnblogs.com/jlfw/p/12207344.html

时间: 2024-11-11 12:41:51

进入页面跳转到指定锚点的相关文章

点击事件然后页面跳转到指定DOM元素的位置

设置一个函数,执行函数滚动条自动拖动,页面跳转到指定DOM元素的位置. 实现方式很简单,首先引入animatescroll.js文件(要先引入JQuery),然后 $('#id').animatescroll(); 即可调到指定DOM元素在页面的位置. 为方便可以编写一个函数,传入DOM元素的ID function jumpTo(id){ $("#"+id).animatescroll(); } 附animatescroll.js /* 使用方法: $("#id")

asp.net在同一页面跳转到指定位置

方案一 location.hash = "#ID" location.hash 可以在同一页面跳转到指定的位置. 页面没有缓冲,一下子就到了指定位置,很突兀 方案二 var hr = $("#ID"); var anh = $(hr).offset().top; $("html,body").stop().animate({ scrollTop: anh }, 2000); 页面平缓的滑到指定的位置,2000毫秒 #ID里面是要滑到的位置.

移动端访问网站页面跳转到指定手机页面

#region 手机端跳转到指定手机页地址 /// <summary> /// 手机端跳转到指定手机页地址 /// </summary> /// <param name="url">手机页地址</param> public static void m_goUrl(string url) { //排除手机访问电脑端 if(BTool.getCookies("pcmod","")!="1&qu

使用onclick跳转到其他页面/跳转到指定url

☆如果是本页显示可以直接用location,方法如下: ①onclick="javascript:window.location.href='URL'" ②onclick="location='URL'" ③onclick="window.location.href='URL?id=11'" ☆如果页面中有frame可以将在location前面添加top.mainframe.frames['right_frame'].location 链接:ht

[转]使用onclick跳转到其他页面/跳转到指定url

如果是本页显示可以直接用location,方法如下: ①onclick="javascript:window.location.href='URL'" ②onclick="location='URL'" ③onclick="window.location.href='URL?id=11'" 如果页面中有frame可以将在location前面添加top.mainframe.frames['right_frame'].location 转自—————

js指定时间之后跳转到指定页面代码实例

js指定时间之后跳转到指定页面代码实例:在某些场景下,需要网页在指定的时间后,网页能够自动跳转到指定页面,比如在无法找到指定网页的情况下,就会显示之前设置好的404页面,并且跳转到指定的页面,下面就是一段代码实现了此效果.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="htt

PHPの页面跳转-常见方法

PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header()函数的定义如下: void header (string string [,bool replace [,int http_response_code]]) 可选参数replace指明是替换前一条类似标头还是添加一条相同类型的标头,默认为替换. 第二个可选参数http_response_code强

php如何实现页面跳转

?PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header()函数的定义如下: void header (string string [,bool replace [,int http_response_code]]) 可选参数replace指明是替换前一条类似标头还是添加一条相同类型的标头,默认为替换.第二个可选参数http_response_code强

探讨PHP页面跳转几种实现技巧 转自# 作者:佚名 来源:百度博客 #

Web系统中,从一个网页跳转到另一个网页,是LAMP项目中最常用的技术之一.页面跳转可能是由于用户单击链接.按钮等引发的,也可能是系统自动产生的. 此处介绍PHP中常用的实现页面自动跳转的方法. PHP页面跳转一.header()函数 header()函数是PHP中进行页面跳转的一种十分简单的方法.header()函数的主要功能是将HTTP协议标头(header)输出到浏览器. header()函数的定义如下: void header (string string [,bool replace