胥望雅 发表于 4 天前

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-router2. 然后,在你的项目中配置 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>
   
    <h1>About Page</h1>
      
   
      Scroll down to see the target element.
   
      
      
      This is the target element.
      
   
</template>


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>
   
    <h1>Home Page</h1>
    <button @click="goToAbout">Go to About Page</button>
   
</template>
方法2: 在页面中处理滚动至指定位置

1. 创建 home.vue , about.vue 页面
2. 在home.vue跳转到about.vue页面
this.$router.push({
path: "/about"
});3. 跳转到about页面后,在about页面获取指定元素距离顶部的距离
<template>


    div1
    div2
   
</template> 

来源:程序园用户自行投稿发布,如果侵权,请联系站长删除
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
页: [1]
查看完整版本: vue-cli 跳转到页面指定位置