美文网首页
vue 点击路由跳转(地址重复)报错以及路由跳转滚动条未回滚到顶

vue 点击路由跳转(地址重复)报错以及路由跳转滚动条未回滚到顶

作者: 郝艳峰Vip | 来源:发表于2020-12-08 10:54 被阅读0次

    前言


    最近在用vue-cli4 ,, vue3.0开发项目时,遇到了路由跳转时当点击同一个路由地址时就会报错,另一个问题就是路由跳转后记住了上一次页面的滚动条的位置,未回滚到顶部。

    step 一,路由跳转时当点击同一个路由地址(也就是路由地址重复)时就会报错,,,或者刷新报错

    main.js

    import Router from 'vue-router'
    const routerPush = Router.prototype.push
    Router.prototype.push = function push(location) {
      return routerPush.call(this, location).catch(error=> error)}
    

    step 二,路由跳转页面未回滚到顶部,记住了上一页面的滚动条位置

    route/index.js

    const router = new VueRouter({
      mode: "history",
      base: process.env.BASE_URL,
      routes,
      //主要是这段,回滚到顶部
      scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
          return savedPosition
        } else {
          return {
            x: 0,
            y: 0
          }
        }
      }
    });
    

    结束语

    好记性不如烂笔头,记录一下,方便以后学习使用

    相关文章

      网友评论

          本文标题:vue 点击路由跳转(地址重复)报错以及路由跳转滚动条未回滚到顶

          本文链接:https://www.haomeiwen.com/subject/fhdfgktx.html