vue路由跳转成功又跳回来(刷新)解决方法（尚品汇）

已于 2022-10-26 16:38:05 修改
阅读量4.2k 收藏 5
点赞数 18
分类专栏： vue 尚品汇 文章标签： vue.js 前端 前端框架 javascript
于 2022-10-26 16:37:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/only_learn/article/details/127535280
版权

在跟着写尚品汇三级联动路由跳转的时候遇到这个问题，就是在我点击商品跳转的时候，路由会跳转并且一瞬间回到home，浏览器会刷新。代码如下：

<!--  -->
<template>
    <!-- 商品分类导航 -->
    <div class="type-nav">
        <div class="container">
            <h2 class="all">全部商品分类</h2>
            <nav class="nav">
                <a href="###">服装城</a>
                <a href="###">美妆馆</a>
                <a href="###">尚品汇超市</a>
                <a href="###">全球购</a>
                <a href="###">闪购</a>
                <a href="###">团购</a>
                <a href="###">有趣</a>
                <a href="###">秒杀</a>
            </nav>
            <div class="sort">
                <div class="all-sort-list2" @click="goSearch">
                    <div class="item" v-for="(c1,index)  in categoryList" :key="c1.categoryId">
                        <h3>
                            <a href="" :data-categoryName="c1.categoryName"
                               :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>
                        </h3>
                        <div class="item-list clearfix">
                            <div class="subitem" v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId">
                                <dl class="fore">
                                    <dt>
                                        <a href="" :data-categoryName="c2.categoryName"
                                           :data-category2Id="c2.categoryId">{{ c2.categoryName }}</a>
                                    </dt>
                                    <dd>
                                        <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
                                            <a href="" :data-categoryName="c3.categoryName"
                                               :data-category3Id="c3.categoryId">{{ c3.categoryName }}</a>
                                        </em>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "TypeNav",
        data(){
          return {
              showSort:true
          }
        },
        mounted() {
            //通知vuex发请求，获取数据，存储在仓库
            this.$store.dispatch('categoryList');
            if(this.$route.path!='/home'){
                this.showSort=false
            }
        },
        methods: {
            goSearch(event) {
                let element = event.target;
                let {categoryname, category1id, category2id, category3id} = element.dataset;
                if (categoryname) {
                    let location = {name: 'search'};
                    let query = {categoryName: categoryname}

                    if (category1id) {
                        query.category1Id = category1id;
                    } else if (category2id) {
                        query.category2Id = category2id;
                    } else if (category3id) {
                        query.category3Id = category3id;
                    }
                    location.query = query;

                    console.log(location)
                    console.log(query)
                    this.$router.push(location)
                }
            }
        },
        computed: {
            ...mapState({
                categoryList: (state) => state.home.categoryList
            })
        }
    };
</script>
<style lang='less' scoped>
  .type-nav {
    border-bottom: 2px solid #e1251b;

    .container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      position: relative;

      .all {
        width: 210px;
        height: 45px;
        background-color: #e1251b;
        line-height: 45px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
      }

      .nav {
        a {
          height: 45px;
          margin: 0 22px;
          line-height: 45px;
          font-size: 16px;
          color: #333;
        }
      }

      .sort {
        position: absolute;
        left: 0;
        top: 45px;
        width: 210px;
        height: 461px;
        position: absolute;
        background: #fafafa;
        z-index: 999;

        .all-sort-list2 {
          .item {
            h3 {
              line-height: 30px;
              font-size: 14px;
              font-weight: 400;
              overflow: hidden;
              padding: 0 20px;
              margin: 0;

              a {
                color: #333;
              }
            }

            .item-list {
              display: none;
              position: absolute;
              width: 734px;
              min-height: 460px;
              background: #f7f7f7;
              left: 210px;
              border: 1px solid #ddd;
              top: 0;
              z-index: 9999 !important;

              .subitem {
                float: left;
                width: 650px;
                padding: 0 4px 0 8px;

                dl {
                  border-top: 1px solid #eee;
                  padding: 6px 0;
                  overflow: hidden;
                  zoom: 1;

                  &.fore {
                    border-top: 0;
                  }

                  dt {
                    float: left;
                    width: 54px;
                    line-height: 22px;
                    text-align: right;
                    padding: 3px 6px 0 0;
                    font-weight: 700;
                  }

                  dd {
                    float: left;
                    width: 415px;
                    padding: 3px 0 0;
                    overflow: hidden;

                    em {
                      float: left;
                      height: 14px;
                      line-height: 14px;
                      padding: 0 8px;
                      margin-top: 5px;
                      border-left: 1px solid #ccc;
                    }
                  }
                }
              }
            }

            &:hover {
              .item-list {
                display: block;
              }
            }
          }
        }
      }
    }
  }
</style>

注意每一个<a>，因为偷懒我没有去掉href="",这样你点了<a>当然成了他的默认用法，跳转到/ ，而咱们已经在路由里面设置了默认路由为home,自然会跳转到home啦，所以去掉每一个<a>里面的href属性就好啦。

<!--  -->
<template>
    <!-- 商品分类导航 -->
    <div class="type-nav">
        <div class="container">
            <h2 class="all">全部商品分类</h2>
            <nav class="nav">
                <a href="###">服装城</a>
                <a href="###">美妆馆</a>
                <a href="###">尚品汇超市</a>
                <a href="###">全球购</a>
                <a href="###">闪购</a>
                <a href="###">团购</a>
                <a href="###">有趣</a>
                <a href="###">秒杀</a>
            </nav>
            <div class="sort">
                <div class="all-sort-list2" @click="goSearch">
                    <div class="item" v-for="(c1,index)  in categoryList" :key="c1.categoryId">
                        <h3>
                            <a  :data-categoryName="c1.categoryName"
                               :data-category1Id="c1.categoryId">{{ c1.categoryName }}</a>
                        </h3>
                        <div class="item-list clearfix">
                            <div class="subitem" v-for="(c2,index) in c1.categoryChild" :key="c2.categoryId">
                                <dl class="fore">
                                    <dt>
                                        <a  :data-categoryName="c2.categoryName"
                                           :data-category2Id="c2.categoryId">{{ c2.categoryName }}</a>
                                    </dt>
                                    <dd>
                                        <em v-for="(c3,index) in c2.categoryChild" :key="c3.categoryId">
                                            <a  :data-categoryName="c3.categoryName"
                                               :data-category3Id="c3.categoryId">{{ c3.categoryName }}</a>
                                        </em>
                                    </dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from 'vuex'

    export default {
        name: "TypeNav",
        data(){
          return {
              showSort:true
          }
        },
        mounted() {
            //通知vuex发请求，获取数据，存储在仓库
            this.$store.dispatch('categoryList');
            if(this.$route.path!='/home'){
                this.showSort=false
            }
        },
        methods: {
            goSearch(event) {
                let element = event.target;
                let {categoryname, category1id, category2id, category3id} = element.dataset;
                if (categoryname) {
                    let location = {name: 'search'};
                    let query = {categoryName: categoryname}

                    if (category1id) {
                        query.category1Id = category1id;
                    } else if (category2id) {
                        query.category2Id = category2id;
                    } else if (category3id) {
                        query.category3Id = category3id;
                    }
                    location.query = query;

                    console.log(location)
                    console.log(query)
                    this.$router.push(location)
                }
            }
        },
        computed: {
            ...mapState({
                categoryList: (state) => state.home.categoryList
            })
        }
    };
</script>
<style lang='less' scoped>
  .type-nav {
    border-bottom: 2px solid #e1251b;

    .container {
      width: 1200px;
      margin: 0 auto;
      display: flex;
      position: relative;

      .all {
        width: 210px;
        height: 45px;
        background-color: #e1251b;
        line-height: 45px;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
      }

      .nav {
        a {
          height: 45px;
          margin: 0 22px;
          line-height: 45px;
          font-size: 16px;
          color: #333;
        }
      }

      .sort {
        position: absolute;
        left: 0;
        top: 45px;
        width: 210px;
        height: 461px;
        position: absolute;
        background: #fafafa;
        z-index: 999;

        .all-sort-list2 {
          .item {
            h3 {
              line-height: 30px;
              font-size: 14px;
              font-weight: 400;
              overflow: hidden;
              padding: 0 20px;
              margin: 0;

              a {
                color: #333;
              }
            }

            .item-list {
              display: none;
              position: absolute;
              width: 734px;
              min-height: 460px;
              background: #f7f7f7;
              left: 210px;
              border: 1px solid #ddd;
              top: 0;
              z-index: 9999 !important;

              .subitem {
                float: left;
                width: 650px;
                padding: 0 4px 0 8px;

                dl {
                  border-top: 1px solid #eee;
                  padding: 6px 0;
                  overflow: hidden;
                  zoom: 1;

                  &.fore {
                    border-top: 0;
                  }

                  dt {
                    float: left;
                    width: 54px;
                    line-height: 22px;
                    text-align: right;
                    padding: 3px 6px 0 0;
                    font-weight: 700;
                  }

                  dd {
                    float: left;
                    width: 415px;
                    padding: 3px 0 0;
                    overflow: hidden;

                    em {
                      float: left;
                      height: 14px;
                      line-height: 14px;
                      padding: 0 8px;
                      margin-top: 5px;
                      border-left: 1px solid #ccc;
                    }
                  }
                }
              }
            }

            &:hover {
              .item-list {
                display: block;
              }
            }
          }
        }
      }
    }
  }
</style>

对你有用就点个赞吧

鱼鱼鱼BOL
关注
专栏目录
vue跳转页面之后返回_为什么用vue路由跳转到另一个页面后马上又回到原来的页面？...
weixin_29876341的博客
12-29 5428
我发现是在路由配置那里添加了一句 mode: 'history'注释掉就没这个问题了，但是前端用了这句代码，后台没有配置，页面不是应该报错404吗，为什么只是跳转到原先的页面Vue.use(Router)export default new Router({// mode: 'history',routes: [{path: '/',name: 'Login',component: Login}...
尚硅谷Vue尚品汇项目-解决购物车刷新页面后数据渲染失败的问题
never_stop_study的博客
10-08 488
尚硅谷Vue尚品汇项目-解决购物车刷新页面后数据渲染失败的问题
vue页面跳转后返回原页面初始位置方法
11-28
vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的 一、main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二、main.js里面vuex状态管理 var store = new Vuex.Store({ state: { recruitScrollY:0 }
vue中跳转路由再次回到原页面，进行缓存相关问题
m0_52263688的博客
07-25 2670
vue中跳转路由再次回到原页面，进行缓存相关问题
Vue3翻页后刷新并保持该页面数据
最新发布
2401_86261141的博客
10-02 703
5.页面打开时就应该获取数据，获取到route的page后传递到pinia中的page,那么每次刷新就会根据page获取相应页码的数据，本来想在pinia中直接使用route,但route一般只定义在setup函数中。2.跳转到第二页的数据，那么pinia中的page应该为2，刷新页面后，page会变回到原始定义的数据1，所以刷新页面后，第2页的数据无法保持，回到第1页。3.我们选择将page带入到route中,每次刷新页面，将获取route中的page,保持刷新后也是第2页的数据。
vue路由跳转闪回，点击跳转的a标签以后页面跳转成功后又闪回到原页面
weixin_44022713的博客
06-07 2253
vue初学时对概念的辩证思考
vue刷新页面跳转新页面但又跳转回原页面的问题
weixin_47375788的博客
01-30 1037
load,在js语法里是onload,这里省去on,onload指页面加载完成后执行window.onload()里的js函数,首次加载页面是建立一个onload的监听事件并不执行,针对的是当前页面的下一次加载即刷新去执行onload里的方法,配合destroyed,可解决某一vue单页面刷新跳转另一页面的问题。beforunload是指页面刷新前执行的最后函数所以即使跳转另一页面也会在刷新完成后跳转回原页面,此方法适用与刷新页面前提交表格数据或阻止刷新的操作。：在mounted内创建监听事件。
Vue的路由配置及手动改地址栏为啥又跳转回来？？
风萧古道的博客
03-05 2873
vue-cli（vue脚手架）超详细教程：https://blog.csdn.net/wulala_hei/article/details/85000530 这个教程里面是使用 vue init webpack app-name，但官方文档中建议的命令是 vue create app-name 但这两个命令创建的项目是有些不一样的，vue init是版本2的方法，vue create是版本3的...
vue项目刷新，会闪现首页然后回到正常页面
weixin_43898997的博客
03-31 4651
vue项目，浏览器刷新，会闪现首页页面，然后回到当前页面，针对这种情况，解决办法如下，可能不是很好，但也能解决问题
vue尚品汇电商项目
wtt123_的博客
10-07 400
vue
11.14 尚品汇 day01 脚手架，路由命名，路由跳转，传参，props传参，重写push,replace
m0_56356342的博客
11-14 158
5.1路由的一个分析 确定项目结构顺序:上中下 -----只有中间部分的V在发生变化，中间部分应该使用的是路由组件 2个非路由组件|四个路由组件 两个非路由组件：Header 、Footer 路由组件:Home、Search、Login（没有底部的Footer组件，带有二维码的）、Register（没有底部的Footer组件，带二维码的）因为项目大的时候src（源代码文件夹）：里面目录会很多，找文件不方便，设置src文件夹的别名的好处，找文件会方便一些。解决：在路由配置页的/:searchWord/
尚硅谷 VUE 尚品汇项目实战问题解决方式整理(Vue3 版)
.
04-30 6378
尚硅谷VUE项目实战，前端项目-尚品汇(大型\重磅) 问题解决方式以及笔记(Vue 3 版)
11.19 尚品汇 day03 鼠标进入显示二、三级分类，三级联动的路由跳转和传参、节流防抖
m0_56356342的博客
11-20 563
需求：1、鼠标进入一级分类显示二、三级分类，三级联动解决：方法一：一级hover时，给二三级的分类添加属性display：block（二三级分类的解构嵌套在一级分类中）方法二：在data定义一个新的索引currentIndex；一级分类绑定鼠标进入事件，获取当前的一级分类的索引index，并让data的currentIndex等于这个一级分类的索引；在二级分类定义一个动态类名触发条件，当index===currentIndex时触发2、节流防抖，用户操作过快鼠标进入卡顿。
vue 点击按钮跳转另一个项目的链接地址，从另一个项目返回回来页面怎么让他刷新
Judy1623
01-24 863
如果你在 Vue 3 中点击按钮跳转到另一个项目的链接地址，然后从另一个项目返回时想要刷新页面，这就涉及到不同域的页面之间的通信问题。一种解决方法是在跳转到另一个项目的链接地址时，将一个标识参数传递给另一个项目。当从另一个项目返回时，检查 URL 中是否包含该标识参数，如果存在则执行页面刷新操作。请注意，在以上示例中，需要确保两个项目在不同的域名（或子域名）上，以便彼此之间可以进行跳转和通信。这样，点击按钮跳转到另一个项目后，从另一个项目返回时，会执行页面刷新操作。
vue路由跳转本来正常,跳转到某一个页面再跳出其他页面,出现页面空白
zhangyu_98的博客
03-11 3215
昨天在写代码的时候遇到一个很奇怪的问题,本来路由都是正常的,结果我跳转到某一个页面后再跳出结果就页面空白了,也不能再跳回原来的页面,刷新后页面又能够正常显示了,后面也筛选了路由的书写都没发现异常. 后面看到页面的时候发现我在template内的根元素外面有一个注释,删除之后就正常了,后面想到html也会吧注释的内容当成一个标签进行显示,这样的话我的template下面就有了两个根元素,但是vue3是已经支持多个根元素了, 这里的原因可能是因为我的路由出口使用 transi...
Vue中路由跳转时出现路由重复跳转的问题解决方案
qq_41373791的博客
10-28 4264
第一种方案 出现这种问题是由于安装的vue-router版本太新的问题。所以第一种方案简单直接，直接在命令行中重新安装旧版本的vue-router。yarn add vue-router@3.0 -S 第二种方案 在vue-router的index.js文件中添加下列代码： import Vue from ‘vue’; import Router from ‘vue-router’; const originalPush = Router.prototype.push Router.prototype.p
vue-router跳转页面，返回上一页跳回指定位置
Keix
06-11 6551
常用的：keep-alive路由缓存（不多解说） 但上面很多时候，因页面需求原因，不能使用这种实现方式，在网上找了很多方法，但是都不是很好用，现在自己实现了一个还算不错的。 首先，在vue-router中，scrollBehavior这个方法是可以打印访问过的页面，滚动的位置的。【注意：在刷新页面时，不会触发该事件】 我们可以使用vuex储存滚动的位置（因页面会做接口请求数据，所以要在数据渲染完成后，再进行跳转） store.commit('SET_ROUTER_POSITION', s.
vue2路由器跳转问题
weixin_61766112的博客
07-15 504
vue路由跳转
vue3创建的项目：用户登录功能路由跳转后又跳回了登录页，并且路径多了个get请求路径的问题
qq_60138125的博客
06-14 297
用户登录功能路由跳转后又跳回了登录页，并且路径多了个get请求路径的问题
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值