首页 > 极客资料 博客日记
vue-cli 跳转到页面指定位置
2024-10-25 12:30:02极客资料围观16次
这篇文章介绍了vue-cli 跳转到页面指定位置,分享给大家做个参考,收藏极客之家收获更多编程知识
原文关注公众号,后台里留言可进行提问,可在后台留言向作者提问解答问题!
方法1:在路由守卫中处理路由滚动
npm install vue-router
2. 然后,在你的项目中配置 Vue Router。例如,在 src/router/index.js 文件中
import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }); export default router;
3.创建目标组件并添加目标元素
假设我们想在 About.vue 组件中滚动到某个特定的位置。我们可以在 About.vue 中添加一个具有唯一 id属性的元素
<template> <div> <h1>About Page</h1> <!-- 为了演示滚动效果,添加高度 --> <div style="height: 1000px;"> Scroll down to see the target element. </div> <!-- 滚动到目标位置 --> <div id="targetElement"> This is the target element. </div> </div> </template> <script> export default { name: 'About', mounted() { // 这里可以添加一些组件挂载后的逻辑,但滚动通常是在路由导航守卫中处理 } }; </script> <style scoped> /* 添加一些样式以改善视觉效果 */ </style>
4.在路由导航守卫中处理滚动
为了实现滚动到指定位置,我们需要在路由导航守卫中处理滚动逻辑。可以在 src/router/index.js 中添加滚动行为:
import Vue from 'vue'; import VueRouter from 'vue-router'; import Home from '../views/Home.vue'; import About from '../views/About.vue'; Vue.use(VueRouter); const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About, // 可以在路由配置中添加 meta 字段来存储滚动信息 meta: { scrollToTarget: true // 标记该路由需要滚动到目标位置 } } ]; const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes, scrollBehavior(to, from, savedPosition) { if (to.meta.scrollToTarget) { return new Promise((resolve, reject) => { setTimeout(() => { // 获取目标元素 const targetElement = document.querySelector('#targetElement'); if (targetElement) { // 滚动到目标位置 targetElement.scrollIntoView({ behavior: 'smooth' }); } resolve(); }, 0); // 使用 setTimeout 确保 DOM 更新完成 }); } else { // 如果没有特定要求,则恢复之前的位置或滚动到顶部 return savedPosition || { x: 0, y: 0 }; } } }); export default router;
5.触发路由导航
最后,在你的 Home.vue 或其他组件中触发路由导航:
<template> <div> <h1>Home Page</h1> <button @click="goToAbout">Go to About Page</button> </div> </template> <script> export default { name: 'Home', methods: { goToAbout() { this.$router.push({ name: 'About' }); } } }; </script>
方法2: 在页面中处理滚动至指定位置
1. 创建 home.vue , about.vue 页面
2. 在home.vue跳转到about.vue页面
this.$router.push({ path: "/about" });
3. 跳转到about页面后,在about页面获取指定元素距离顶部的距离
<template> <div> <!-- 为了演示滚动效果,添加高度 --> <div style='height:1000px'>div1</div> <div id='div2' class='id2'>div2</div> </div> </template> <script> export default { name: "about", mounted() { this.setScrolltop(); }, methods: { setScrolltop(){ let time=setTimeout(()=>{ this.$nextTick(()=>{ let top=0; let targetElement=document.getElementById("id2"); if(targetElement){ // 获取元素距离顶部的距离 top=targetElement.offsetTop; } if(top>0){ // 滚动到指定位置 window.scrollTo({ top: top, behavior: 'smooth' }); } clearTimeout(time); time=null; }) },1000); } } } </script>
版权声明:本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:jacktools123@163.com进行投诉反馈,一经查实,立即删除!
标签:
上一篇:如何正确的使用CMDB?
下一篇:『玩转Streamlit』--多页应用
相关文章
最新发布
- Nuxt.js 应用中的 prerender:routes 事件钩子详解
- 【问题解决】Tomcat由低于8版本升级到高版本使用Tomcat自带连接池报错无法找到表空间的问题
- 【FAQ】HarmonyOS SDK 闭源开放能力 —Vision Kit
- 六、Spring Boot集成Spring Security之前后分离认证流程最佳方案
- 《JVM第7课》堆区
- .NET 8 高性能跨平台图像处理库 ImageSharp
- 还在为慢速数据传输苦恼?Linux 零拷贝技术来帮你!
- 刚毕业,去做边缘业务,还有救吗?
- 如何避免 HttpClient 丢失请求头:通过 HttpRequestMessage 解决并优化
- 让性能提升56%的Vue3.5响应式重构之“版本计数”