vue 实现跨页面锚点

作者: 东京的雨不会淋湿首尔 | 来源:发表于2018-11-02 12:30 被阅读15次

1.先记录一下非跨页面的实现方法:
官方文档有写,这样在一个组件里改变hash,比如#anchor-1,
就能够跳到id为anchor-1的位置

  router.js中添加

          mode: 'history',
              srcollBehavior(to,from,savedPosition){
              if(to.hash){
                  return {
                  selector:to.hash
                 }
          }}

2.但是如果我们要做页面跳转时的锚点,
比如 a组件点击 pageb#anchor-1跳转到b组件,b组件需要根据hash跳转到指定位置,就不能用上面的方法了。
可以如下实现:
在b组件内添加一个方法:

goAnchor(selector) {
                let anchor = this.$el.querySelector(selector)
                document.documentElement.scrollTop = anchor.offsetTop 
            },
#这里是根据root 节点来scroll,可以自己根据需要调整scroll对象

在b组件的mounted中添加

this.$nextTick(()=>[
                    this.goAnchor(window.location.hash)
                ])

这样跳转到静态页面是没有问题了

但是如果

b组建执行锚点的地方是通过ajax获取数据,v-for渲染的,这样在goAnchor方法中是获取不到anchor节点的,需要等待渲染完成。我们可以通过watch来观察数据是否加载完毕

data() {
            return {
                        items:[]  #通过ajax获取
            }
},
watch:{
            items:function () {
                this.$nextTick(()=>[
                    this.goAnchor(window.location.hash)
                ])
            }
        },

这样就能解决跨页面的锚点问题

相关文章

  • vue 实现跨页面锚点

    1.先记录一下非跨页面的实现方法:官方文档有写,这样在一个组件里改变hash,比如#anchor-1,就能够跳到i...

  • iview 锚点爬坑 && vue 锚点

    在vue中实现锚点定位效果 iview的锚点 原生锚点实现 iview爬坑点 且需要把滚动容器的id或者class...

  • PHP从入门到精通,010第二章HTML-HTML的核心标记之锚

    二、HTML的核心标记 (十)、锚点链接 说明:可以在当前页面中进行跳转,或者可以跨页面跳转。 锚点链接需要两部分...

  • 2019-07-02 overflow 与锚点定位

    overflow 与锚点定位 锚点,通俗点的解释就是可以让页面定位到某个位置的点。 基于URL 地址的锚链实现锚点...

  • echarts图中添加标志有备注的锚点

    echarts图中添加标志有备注的锚点 lineMarker.vue 组件文件 主页面文件

  • 吸顶和vue实现锚点跳转

    另vue实现锚点跳转之scrollIntoView()方法滚动到某个特定元素 :scrollIntoView();...

  • a标签锚点的问题

    a便签作为锚点定位页面的位置还是很常见的,基本实现如下: 但是,点击锚点,会使相应内容直接滚动到页面最顶部,如果有...

  • 2018-04-18

    页面中置顶按钮的实现 方法一 锚点链接 方法二 通过js改变$(document).scrollTop()的值实现...

  • html 锚点三种实现方法

    在网页中经常用到锚点,特别是在比较长的页面中锚点的使用会增加用户体验,现在php中文网介绍html 锚点三种实现方...

  • Vue扩展

    VueX HTTP是无状态的,跨页面的数据无法共享,但Vue是单页面应用,VueX可以实现数据共享; VueX的更...

网友评论

    本文标题:vue 实现跨页面锚点

    本文链接:https://www.haomeiwen.com/subject/fxgqxqtx.html