Vue 跨页面#锚链接跳转

从`home`页面 -链接- `list`页面

第一步：在home页面`用a标签设置锚链接`

<!-- home.vue-->
<a href="/list#Scientists">跳去列表页 科学家</a>
<a href="/list#Innovators">跳去列表页 创新者</a>

第二步：在list页面`设置id属性`

<!-- list.vue-->
<p id="Scientists">列表页科学家内容...
</p>
<p id="Scientists">列表页创新者内容...
</p>

第三步：判断当前页面的 `window.location.hash`（`标签值`），如果有就执行方法`goAnchor()`滚动到元素位置


mounted() {/** 判断当前页面的标签值，如果有就执行方法*/if (window.location.hash) {this.$nextTick(() => {this.goAnchor(window.location.hash);});}},
methods: {/** 页面滚动到元素位置 */goAnchor (selector) {let anchor = this.$el.querySelector(selector)document.body.scrollTop = anchor.offsetTop; // chromedocument.documentElement.scrollTop = anchor.offsetTop; // firefox},
}

Vue 跨页面#锚链接跳转相关推荐

【vue】页面缓存回跳后侧边栏z-index层级导致页面快闪
问题描述公司使用的帆软报表页面没有加keepAlive缓存,在从一个弹框页面跳转到子报表后,切换路由回到当前页面是会继续展示弹框页面,但是页面由于z-index层级问题会闪一下. 问题排查经过代码 ...
如何在vue项目中，跨页面（跨路由）使用新手引导工具 Intro.js
文章目录功能要求使用Intro.js遇到的问题以及代码 1.不能跨路由 utils -> intro.js 2.要在页面引导所需显示的数据全部拿到且渲染完毕以后加载Intro.js intr ...
Nginx 解决WebApi跨域二次请求以及Vue单页面问题
Nginx 解决WebApi跨域二次请求以及Vue单页面问题参考文章: (1)Nginx 解决WebApi跨域二次请求以及Vue单页面问题 (2)https://www.cnblogs.com/ji ...
vue中页面跳转传值_vue 页面跳转传参
页面之间的跳转传参,正常前端js里写 window.location.href="xxxxx?id=1" 就可以了: 但是vue不一样需要操作的是路由history,需要用到 V ...
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 “invalid signature“错误解决方案
vue 单页面(SPA) history模式调用微信jssdk 跳转后偶尔 "invalid signature"错误解决方案参考文章: (1)vue 单页面(SPA) hist ...
vue实现页面跳转过渡效果 transition
vue实现页面跳转过渡效果当我们做移动端页面的页面跳转时,不想让页面跳转的那么生硬,所以需要添加过渡效果 html部分(name="fade" 这是关键一步,fade 是自定义c ...
session在html页面跳转,session跨页面传值为空
PHP中的SESSION页面间传值的问题 a.php 代码 @session_start(); $_SESSION['username']=$row['username']a.php 代码跳转 b. ...
vue中单页面应用页面跳转
vue中单页面应用页面跳转 <router-link :to="{ path: '/map'}"> <el-button type="success&q ...
html页面跳转href过渡效果,页面锚链接平滑动画过渡纯JS插件
smooth-scroll.js是一款轻量级的纯JS页面锚链接平滑过渡插件.通过该锚链接插件,可以在点击页面的锚链接时,以指定的过渡动画平滑滚动页面. 安装可以通过npm或bower来安装smoot ...

Vue 跨页面#锚链接跳转

从`home`页面 -链接- `list`页面

第一步：在home页面`用a标签设置锚链接`

第二步：在list页面`设置id属性`

第三步：判断当前页面的 `window.location.hash`（`标签值`），如果有就执行方法`goAnchor()`滚动到元素位置

Vue 跨页面#锚链接跳转相关推荐

最新文章

热门文章

Vue 跨页面#锚链接跳转

从home页面 -链接- list页面

第一步：在home页面用a标签设置锚链接

第二步：在list页面设置id属性

第三步：判断当前页面的 window.location.hash（标签值），如果有就执行方法goAnchor()滚动到元素位置

Vue 跨页面#锚链接跳转相关推荐

最新文章

热门文章

从`home`页面 -链接- `list`页面

第一步：在home页面`用a标签设置锚链接`

第二步：在list页面`设置id属性`

第三步：判断当前页面的 `window.location.hash`（`标签值`），如果有就执行方法`goAnchor()`滚动到元素位置