vue.js - VueJS从不同的路线滚动到部分
问题描述
我正在尝试使用 Vue 和 Vue 路由器(使用历史模式)滚动到页面上的锚点。
在索引页面上时,滚动行为通过跳转到该部分来按预期工作。
但是,当我是另一个页面时,它会在顶部加载索引页面,而不是锚点指向的位置。
我敢肯定这是一件非常简单的事情,但我无法理解它!
任何帮助表示赞赏!
我的路由器索引:
export default new Router({
scrollBehavior: function(to, from, savedPosition) {
if (to.hash) {
return {selector: to.hash}
} else {
return {x: 0, y: 0}
}
},
mode: 'history',
routes: [ ... ]
})
我的导航:
<router-link @click.native="closeNav" to="/#enter">Enter</router-link>
<router-link @click.native="closeNav" to="/#prizes">Prizes</router-link>
<router-link @click.native="closeNav" to="/#faqs">FAQ</router-link>
<router-link @click.native="closeNav" to="/contactus">Contact</router-link>
解决方案
Vue 路由器 v3.x
这是一个老问题,OP 几乎肯定已经找到了解决方案,但是对于遇到这个问题的任何人来说,这应该可以解决问题:
<router-link :to="{ name: 'Homepage', hash: '#enter' }">Enter</router-link>
<router-link :to="{ name: 'Homepage', hash: '#prizes' }">Prizes</router-link>
<router-link :to="{ name: 'Homepage', hash: '#faqs' }">FAQ</router-link>
<router-link :to="{ name: 'Contact' }">Contact</router-link>
这应该允许您从其他视图/组件访问这些链接,并且单击时会将您重定向到命名路由(在本例中为主页),并滚动到指定的哈希(#enter、#prizes、#faqs)。
除了问题中的路由器代码片段之外,您还可以使用本机window.scrollTo
方法添加平滑滚动:
export default new Router({
routes: [],
mode: 'history',
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return window.scrollTo({
top: document.querySelector(to.hash).offsetTop,
behavior: 'smooth'
})
} else {
return { x: 0, y: 0 }
}
}
})
Vue 路由器 v4.x 的更新
你写你router-link
的 s 一样,但你现在可以写滚动行为和元素选择更整洁一些。从文档
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
if (to.hash) {
return {
el: to.hash,
behavior: 'smooth'
}
}
}
})
推荐阅读
- r - 将多个分类值转换为数值
- php - Paypal 支付更新 MySQL db
- r - p_load 导致安装/加载失败:lubridate、shiny、rio
- c# - 如何删除非第三方身份验证 ASP.NET Core
- git - 如何在 GitHub 上查看提交图?
- ruby-on-rails - postgresql 计算每个年龄组的库存数量
- delphi - 合并两个窗口以使它们具有单个输入焦点?
- c# - 获取最接近整数的平均值
- mongodb - 用户架构/地址架构
- winapi - GDI:使用 CreateCompatibleBitmap 或 CreateDIBSection 创建的位图是否已初始化?