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

复制代码
npm install vue-router
  1. 然后,在你的项目中配置 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"
});
  1. 跳转到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>
相关推荐
我命由我1234513 小时前
微信小程序 - 自定义实现分页功能
前端·微信小程序·小程序·前端框架·html·html5·js
一个处女座的程序猿O(∩_∩)O17 小时前
《深入探索Vben框架:使用经验与心得分享》
vue
Pro_er1 天前
Vue3 性能优化十大技巧:打造高性能应用的终极指南
vue·前端开发
Pro_er2 天前
Vue3响应式编程三剑客:计算属性、方法与侦听器深度实战指南
vue·前端开发
鑫~阳3 天前
Vue2是如何利用Object.defineProperty实现数据的双向绑定?
前端·vue.js·vue
寰宇软件3 天前
PHP房屋出租出售高效预约系统小程序源码
前端·小程序·uni-app·vue·php
爱学习的小王!3 天前
nvm安装、管理node多版本以及配置环境变量【保姆级教程】
经验分享·笔记·node.js·vue
程序员小续3 天前
Excel 表格和 Node.js 实现数据转换工具
前端·javascript·react.js·前端框架·vue·excel·reactjs
胖头鱼不吃鱼-4 天前
开源低代码平台与 Vue.js
开源·vue
零凌林4 天前
WEB前端将指定DOM生成图片并下载最佳实践(html2canvas)
前端·vue·html2canvas·blob·图片下载·dom转图片