博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于vue路由跳转页面带参数方法总结
阅读量:6307 次
发布时间:2019-06-22

本文共 1013 字,大约阅读时间需要 3 分钟。

hot3.png

因为最近项目有这样一个需求:在首页导航栏显示消息数,点击每一条未读消息带着参数跳转到相应页面进行显示,网上查了好些办法,比如a组件跳转到b组件:

对于a组件有几种方式

1.纯页面跳转

2.通过js控制:

对于b组件的监听:这里是我遇到坑的地方,本来监听代码是这样:

watch: {

    '$route': 'getParams'  // 监测路由变化,只要变化了就调用getParams
  },

  methods: {

    getParams() {
      const params = this.$route.params.dataobj  // 取到路由带过来的参数
  }

但是发现第一次跳转时并没有监听到路由变化,而且多次切换路由参数是累加的(使显示不对),所以查了好多方法,最后在b组件中使用beforeRouteEnter 方法实现了a页面跳转带参显示在组件b中,需要注意的是此方法与watch,methods同级,且页面还未加载所以不能用this,具体用法可以百度下。

与这个方法相关的方法也可以百度了解下,非常实用:

 beforeRouteUpdate (to, from, next) {

      // 在当前路由改变,但是该组件被复用时调用

      // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,

      // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

      // 可以访问组件实例 `this`

    },

    beforeRouteLeave (to, from, next) {

      // 导航离开该组件的对应路由时调用

      // 可以访问组件实例 `this`

    }

对于b组件

watch(){},beforeRouteEnter(to, from, next) {      next(vm => { // 通过 `vm` 访问组件实例        console.log(vm.$route.params)      })    },methods:{  //your code}

转载于:https://my.oschina.net/u/3762697/blog/2961792

你可能感兴趣的文章
Echart:前端很好的数据图表展现工具+demo
查看>>
CATransform3D iOS动画特效详解
查看>>
Linux VNC黑屏(转)
查看>>
Java反射简介
查看>>
react脚手架应用以及iview安装
查看>>
shell学习之用户管理和文件属性
查看>>
day8--socket网络编程进阶
查看>>
node mysql模块写入中文字符时的乱码问题
查看>>
仍需"敬请期待"的微信沃卡
查看>>
分析Ajax爬取今日头条街拍美图
查看>>
内存分布简视图
查看>>
POJ 2918 求解数独
查看>>
如何学习虚拟现实技术vr? vr初级入门教程开始
查看>>
第4 章序列的应用
查看>>
Mysql explain
查看>>
初识闭包
查看>>
java tcp socket实例
查看>>
011 指针的算术运算
查看>>
hdu1874畅通工程续
查看>>
rails 字符串 转化为 html
查看>>