vue中点击重复路径报错发问题

最新推荐文章于 2024-02-23 12:47:41 发布

qq_50031016

最新推荐文章于 2024-02-23 12:47:41 发布

阅读量221

点赞数

分类专栏：前端bootstarpvue+vue.js 前端文章标签： vue.js es6 node.js

本文链接：https://blog.csdn.net/qq_50031016/article/details/117962951

版权

前端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端bootstarpvue+vue.js

7 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue项目中处理导航栏子菜单重复点击导致的错误。通过修改Router原型上的push方法，捕获并处理可能抛出的错误。同时，展示了如何在页面组件中监听路由变化，实现在路由变化时重新获取数据，确保页面内容的正确更新。此方法适用于需要动态加载数据且依赖路由参数的场景。

摘要由CSDN通过智能技术生成

在项目中遇到导航栏子菜单重复路劲报错时，使用监听解决
一，在router下index.js中加上这一句话

///解决重复点菜单报红问题
const originalPush = Router.prototype.push
Router.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

二，如何在点击页面写

/* eslint-disable no-unused-vars */
<template>
 <div :key="index" v-for="(items,index) in listcase" >
   <p  @click="caseCenter(items.code)">{{items.name}}</p>
 </div>
</template>
<script>
import Cards from './cards.vue'
import Carousel from './carousel.vue'
export default {
  name: 'homePage',
  data () {
    return {
      listcase:[]
    }
  },
  methods: {
   init () {
      this.$http.get('自己的后台路径').then(res => {
        if (res.data.data != undefined && res.data.data != null) {
          this.listcase= res.data.data
        }
      })
    },
     caseCenterr (code) {
      var self = this
      self.$router.push({
        name: 'caseCenterType',
        query: {//这里是query,不是params
          code: code
        }
      })
    },
  }
}

</script>
<style scoped>
</style>

三，在需要跳转的页面上写

<template>
<div>
   <div :key="index" v-for="(data,index) in paginatedCards" >
         <div>{{data.name}}</div>
                 
              </div>
          
        </div>

      </b-container>
    </div>
   <Footer/>
</div>
</template>

<script >
export default {
  name: 'type',
  data () {
    return {
      cards: [],
    }
  },
  //这个是重点
  created () {
    this.init()
  },
  //这个是重点
  watch:{
    '$route' () {
      this.init()
    }
  },
  methods: {
    Info (code) {
      var self = this
      self.$router.push({
        name: 'dfdf',
        query: {
          code: code
        }
      })
    },
    init () {
    //这个是重点
      this.code = this.$route.query.code
      this.$http.get('api/jks/sdsjk/sdsd/' + this.code).then(res => {
        if (res != undefined) {
          this.cards = res.data.data
        }
      })
    }
  }
}
</script>
<style >
</style>