Vue跨页面锚点定位

原创于 2023-02-10 11:33:18 发布

· 280 阅读

1 ·

版权

文章标签：

#vue.js #前端 #javascript

vue 专栏收录该内容

25 篇文章

订阅专栏

该文章讨论了在Vue.js应用程序中如何使用goUrl方法结合sessionStorage实现页面跳转，并在页面创建时自动定位到锚点。当离开页面时，会清除sessionStorage中的锚点ID，以防止其他入口页面出现意外的锚点问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当前页

<li><span @click="goUrl('/solutionApp', 'slt')">产品解决方案</span></li>

    goUrl(url, id) {
      sessionStorage.setItem(id, id)
      this.$router.push(url);
    }

跳转页

created () {
      //创建时执行跳转锚点位置
      this.$nextTick(() => {
        this.getLocal();
      });
    },
    //离开页面进行对localStorage  id销毁，避免其他入口进来有锚点问题
    destroyed() {
      sessionStorage.setItem("slt", "");
    },
    methods: {
      getLocal() {
        //找到锚点id
        const selectId = sessionStorage.getItem("slt");
        //如果对应id存在，就跳转
        if (selectId) {
          document.getElementById(selectId).scrollIntoView(true)
        }
      }
    }