vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法

作为vue的初用者，你可能会像我一样遇到一个问题，对跳转组件是，我们想通过参数不同，调用不同的方法。

例如：

app.vue

  <ul>
      <li class="navList" v-for="index in goods" :key="index.name">
       <router-link :to="{path:index.link,query:{type:index.name}}" >
        {{index.name}}
       </router-link>
      </li>
   </ul>

app…vue中的data数据：

goods:[
  {name:'女装',link:'goods'},
  {name:'男装',link:'goods'},
  ]

在goods.vue中接受数据

mounted(){
  this.stri=this.$route.query.type;
 }

当我循环输出这些链接，每个链接的地址都是一样的。参数不一样，当我们点击我们的按钮时

我们只会看到导航栏中的参数在变化，然而我们页面中的数并没有变化。这是为什么呢？

相信很多朋友也已经知道了，这是因为跳转同一个组件，这个组件在第一次，会执行组件的生命周期中的步骤，但是第二次再跳转该组件的时候，组件会被重用，所以不会再执行生命周期中的某些过程，同样mount也不会执行，也就是说，不会执行第二次赋值。

那我们应该怎么获取值呢？

这里有一个方法：

goods.vue

beforeRouteUpdate(to,from,next){
  this.stri=to.query.type;
  next();
 }

beforeRouteUpdate的作用就是监听在当前路由改变，但是该组件被复用时调用

这就是我们所需要的东西了。路由的地址变化了，组件也被复用了。

同样的我能还可以使用另一种监听路由变化的方法：

 watch:{
  '$route'(to,from){
   this.stri=to.query.type
  }
 },

这个方法，和上面的beforeRouteUpdate起到一样的效果。

如果你遇到的问题，和我所遇到的一样，那么恭喜你，你也解决了这个问题。

以上这篇vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue 路由跳转四种方式 (带参数)

    1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

  • 详解解决Vue相同路由参数不同不会刷新的问题

    通常情况下我们喜欢设置keepAlive 包裹 router-view <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> 同时在created 中触发请求,在路由参数不同的情况下并不会执行对应的操作. 解决方法: 1.给 router-view 设置 key 属性为路由的完整路径 <keep-alive&g

  • 详解vuejs几种不同组件（页面）间传值的方式

    在应用复杂时,推荐使用vue官网推荐的vuex,以下讨论简单SPA中的组件间传值. 一.路由传值 路由对象如下图所示: 在跳转页面的时候,在js代码中的操作如下,在标签中使用<router-link>标签 this.$router.push({ name: 'routePage', query/params: { routeParams: params } }) 需要注意的是,实用params去传值的时候,在页面刷新时,参数会消失,用query则不会有这个问题. 这样使用起来很方便,但url会

  • 浅谈针对Vue相同路由不同参数的刷新问题

    在使用vue和vue-router开发spa应用时,我们会遇到这样一种问题. 当页面跳转时,组件本身并没有发生改变: // 路由映射关系'/form/:type' // 当前页面路由/form/shop1 this.$router.push({ name: 'form', params: { type: 'shop2' }) 这时我们进行路由跳转后会发现组件并没有刷新,在前一个路由组件的数据都保留了下来,这并不是我们想要的效果. 对于简单的数据更新,我们可以直接监听路由参数并重新获取路由的初始化

  • vue从一个页面跳转到另一个页面并携带参数的解决方法

    1.需求: 点击商场跳转到商业体列表 解决方案: 元页面: a标签中添加跳转函数 <a class="orderBtn1 sIRicon2" href="javascript:void(0);" rel="external nofollow" @click="toMallInfo('M000989')"><i class="sIRicon"></i>商场</a>

  • vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法

    作为vue的初用者,你可能会像我一样遇到一个问题,对跳转组件是,我们想通过参数不同,调用不同的方法. 例如: app.vue <ul> <li class="navList" v-for="index in goods" :key="index.name"> <router-link :to="{path:index.link,query:{type:index.name}}" > {{in

  • vue跳转同一个路由参数不同的问题

    vue跳转同一个路由参数不同的问题

    目录 vue跳转同一个路由参数不同 问题 第一种方法 第二种方法 vue跳转同一路由报错 原因 解决方案 vue跳转同一个路由参数不同 问题 vue项目同一个路由跳转(路由不变,后面参数变化),第一次碰到这个问题的时候,搜了很多文章,大约是第一种解决方案,很顺利解决了. 可是!!!在app上的时候,它地址变了刷新不了!! 第一种方法 window.location.href = 改变参数后的新地址 window.location.reload(); 在app上地址更新但是不刷新!!!然后就有了第

  • vue跳转方式（打开新页面）及传参操作示例

    本文实例讲述了vue跳转方式(打开新页面)及传参操作.分享给大家供大家参考,具体如下: 1. router-link跳转 // 直接写上跳转的地址 <router-link to="/detail/one"> <span class="spanfour" >link跳转</span> </router-link> // 添加参数 <router-link :to="{path:'/detail/two'

  • Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法

    vue中v-if 和v-else-if在页面加载的时候,不满足条件的标签会加载然后再消失掉,如果要解决这个问题,案例如下: vue html代码块: <div id="divApp"> <div v-if="type === 'A'" v-cloak> A </div> <div v-else-if="type === 'B'" v-cloak> B </div> <div v-e

  • 移动端页面在ios中不显示图片的解决方法

    移动端页面在ios中不显示图片的解决方法

    在移动端开发中,有的时候可能遇到这样的问题,我从别人网站上下载下来的图片,然后做出H5页面,但是在浏览器中和android中都显示正常,可是一到ios中图片就不显示了,这个时候就需要注意了,可能是图片的格式问题导致ios中不认识,比如我从网上下载的图片保存到电脑中不能预览的图片就是这种. 在计算机中打开预览图片显示如下: 这样的图片在ios中就不显示,解决办法很简单,就是在下载的时候去掉后面的类型就可以了, 以上这篇移动端页面在ios中不显示图片的解决方法就是小编分享给大家的全部内容了,希望能给

  • Ajax 动态载入html页面后不能执行其中的js快速解决方法

    事件背景 有一个公用页面需要在多个页面调用,其中涉及到部分js已经写在了公用页面中,通过ajax加载该页面后无法执行其中的js. 解决思路 1. 采用附加一个iframe的方法去执行js,为我等代码洁癖者所不齿. 2. 使用document.write输出代码,我等简洁主义者所不愿. 3. 最简单的方法是把js放到需要调用的父页面,那想这样的公用页面,每个地方调用都要写入一次,代码冗余. 4. eval是个解决方法,虽然低效. 5. 复杂的解决方法:正则匹配出加载页面中的所有js,为这些js创建

  • IIS下自定义404页面返回200状态码的严重性及解决方法

    IIS下自定义404页面返回200状态码的严重性及解决方法

    在了解404页面前,先给大家了解一下几个常见的HTTP状态码.* 404 : 请求的网页不存在(不排除日后该链接有效的可能性):* 410 : 请求的网页不存在(永久):* 200 : 服务器成功返回网页* 302 : 网址临时重定向(跳转)* 301 : 网址永久重定向* 403 : 拒绝访问* 500 : 内部错误 当访问一个不存在的页面时会返回404状态码,告诉搜索引擎这个页面不存在或者已经删除.默认情况下没做自定义404页面时,访问一个不存在的页面会如下图所示 出现这样的页面无论是对用户

  • JavaScript页面刷新与弹出窗口问题的解决方法

    一.无提示刷新网页 大家有没有发现,有些网页,刷新的时候,会弹出一个提示窗口,点"确定"才会刷新.而有的页面不会提示,不弹出提示窗口,直接就刷新了. 如果页面没有form,则不会弹出提示窗口. 如果页面有form表单, a)< form method="post" ...> 会弹出提示窗口 b)< form method="get" ...> 不会弹出 二.javascript刷新页面的方法 window.location

  • vue如何通过router-link或者button跳转到一个新的页面

    目录 通过router-link或者button跳转到一个新的页面 vue跳转到一个新的页面的多种方法 1.router-link路由 2.button按钮 3.a链接 通过router-link或者button跳转到一个新的页面 a.商品列表页面如下(点击'跳转到购物车页面'就会跳到一个新的页面,而不是在同一个页面加载一个组件) <template>   <div>     这是商品列表页面     <router-link to='/goods/title'>显示商

  • Vue中自定义全局组件的实现方法

    前言 有时候我们在做开发的时候,就想自己写一个插件然后就可以使用自己的插件,那种成就感很强.今天就解决了一个长期困扰着我的问题,现在记录一下,供日后参考. 涉及知识点是Vue.js官网教程中的插件使用 方法如下: 首先我遇到的问题就是我自定义的组件如果需要在项目中其他组件中多次被调用,而我之前的解决方法就是简单的,哪里需要在哪引用.这无疑增加了许多代码重复. 而在使用Vue.js的一些UI框架的时候则注意到,只需要在项目的入口文件中import这个插件然后在接着Vue.use('插件名').这样

随机推荐