vue-cli 跳转到页面指定位置

原文关注公众号，后台里留言可进行提问，可在后台留言向作者提问解答问题!

https://mp.weixin.qq.com/s?__biz=Mzg3NTAzMzAxNA==&mid=2247484254&idx=1&sn=361bbb2113be3eeda3802f0a805c5705&chksm=cec6fb87f9b1729174e3ae66bf9693207386256c964499c098fb8a6cc14b4ba266bc271073a3&token=689492939&lang=zh_CN#rd

方法1：在路由守卫中处理路由滚动

安装vue-router

1. npm install vue-router

复制代码

2. 然后，在你的项目中配置 Vue Router。例如，在 src/router/index.js 文件中

1. import Vue from 'vue';  
2. import VueRouter from 'vue-router';  
3. import Home from '../views/Home.vue';  
4. import About from '../views/About.vue';  
5.   
6. Vue.use(VueRouter);  
7.   
8. const routes = [  
9.   {  
10.     path: '/',  
11.     name: 'Home',  
12.     component: Home  
13.   },  
14.   {  
15.     path: '/about',  
16.     name: 'About',  
17.     component: About  
18.   }  
19. ];  
20.   
21. const router = new VueRouter({  
22.   mode: 'history',  
23.   base: process.env.BASE_URL,  
24.   routes  
25. });  
26.   
27. export default router;

复制代码

3.创建目标组件并添加目标元素
假设我们想在 About.vue 组件中滚动到某个特定的位置。我们可以在 About.vue 中添加一个具有唯一 id属性的元素

1. <template>  
2.    
3.     <h1>About Page</h1>
4.       
5.      
6.       Scroll down to see the target element.  
7.    
8.       
9.       
10.       This is the target element.  
11.       
12.    
13. </template>  
14.   
15.   
16.   

复制代码

4.在路由导航守卫中处理滚动
为了实现滚动到指定位置，我们需要在路由导航守卫中处理滚动逻辑。可以在 src/router/index.js 中添加滚动行为：

1. import Vue from 'vue';  
2. import VueRouter from 'vue-router';  
3. import Home from '../views/Home.vue';  
4. import About from '../views/About.vue';  
5.   
6. Vue.use(VueRouter);  
7.   
8. const routes = [  
9.   {  
10.     path: '/',  
11.     name: 'Home',  
12.     component: Home  
13.   },  
14.   {  
15.     path: '/about',  
16.     name: 'About',  
17.     component: About,  
18.     // 可以在路由配置中添加 meta 字段来存储滚动信息  
19.     meta: {  
20.       scrollToTarget: true // 标记该路由需要滚动到目标位置  
21.     }  
22.   }  
23. ];  
24.   
25. const router = new VueRouter({  
26.   mode: 'history',  
27.   base: process.env.BASE_URL,  
28.   routes,  
29.   scrollBehavior(to, from, savedPosition) {  
30.     if (to.meta.scrollToTarget) {  
31.       return new Promise((resolve, reject) => {  
32.         setTimeout(() => {
33.         // 获取目标元素
34.           const targetElement = document.querySelector('#targetElement');  
35.           if (targetElement) {
36.           // 滚动到目标位置  
37.             targetElement.scrollIntoView({ behavior: 'smooth' });  
38.           }  
39.           resolve();  
40.         }, 0); // 使用 setTimeout 确保 DOM 更新完成  
41.       });  
42.     } else {  
43.       // 如果没有特定要求，则恢复之前的位置或滚动到顶部  
44.       return savedPosition || { x: 0, y: 0 };  
45.     }  
46.   }  
47. });  
48.   
49. export default router;

复制代码

5.触发路由导航
最后，在你的 Home.vue 或其他组件中触发路由导航：

1. <template>  
2.    
3.     <h1>Home Page</h1>  
4.     <button @click="goToAbout">Go to About Page</button>  
5.    
6. </template>  
7.   

复制代码

方法2： 在页面中处理滚动至指定位置

1. 创建 home.vue , about.vue 页面
2. 在home.vue跳转到about.vue页面

1. this.$router.push({
2.   path: "/about"
3. });

复制代码

3. 跳转到about页面后，在about页面获取指定元素距离顶部的距离

1. <template>
2.   
3.   
4.     div1
5.     div2
6.    
7. </template>

复制代码

 

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！