vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019-11-05 18:07
2783 查看
作为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跳转同一个组件,参数不同,页面接收值只接收一次的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- vue从一个页面跳转到另一个页面并携带参数的解决方法
- vue页面跳转并传递参数 保存参数到网址?a=&b= 解决 刷新页面 无法保存接收到的参数情况
- 解决多个路由绑定同一个组件 获取参数只获取一次的方法
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- vue-router 多个路由地址绑定一个组件造成 created 不执行的解决方法
- thinkPHP传数组到模板页面volist每一列加一个button,点击按钮携带参数传给JS函数,跳转到不同的方法
- javascript通过url向jsp页面传递中文参数乱码解决方法(两次编码,一次解码)
- Vue页面之间传递及接收参数方法
- iOS tabbar和navigation组合,点击item两次,会pop到上一个页面,解决不让控制器跳转的方法
- asp.net 参数不同共用一个页面的实现方法
- tapestry一个方法中从一个页面向不同页面的跳转问题
- 一个list中包含不同的type时如何遍历?页面如何接收?Jquery调用后台方法?
- js跳转到新页面传参以及接收参数的方法
- Spring MVC 使用redirect跳转页面,页面无法使用jstl接收参数的 解决办法
- asp.net 参数不同共用一个页面的实现方法
- 记录:vue-cli相同路由不同query,页面不再执行生命周期跳转 解决
- js跳转到新页面传参以及接收参数的方法
- vue 项目打包组件图片不见,不能跳转解决方法
- vue2.0 页面A跳转到页面B,B页面停留在A页面的滚动位置的解决方法
- vue引用vue-ueditor-wrap组件,一个页面要多次渲染UEditor编辑器时,v-mode绑定失效,v-mode值改变编辑器内容不改变解决方式