Taro: Current.router.params无法正确获取路由参数

[349989153]

相关平台

H5

复现仓库

https://无
浏览器版本: Chrome 83.0.4103.116
使用框架: React

复现步骤

浏览器地址是：http://0.0.0.0:10086/pages/home/index?tid=MTk=

可见路由参数： { tid: 'MTk=' }

在页面上加入代码：

componentDidShow() {
    console.log('Taro.Current', Taro.Current);
    console.log('this.$router', this.$router);
  }

期望结果

Taro.Current.router.params为{ tid: 'MTk=' }
this.$router.params为{ tid: 'MTk=' }

实际结果

Taro.Current.router. params是undefined
this.$router是undefined

环境信息

Taro CLI 3.0.2 environment info:
    System:
      OS: macOS 10.14.4
      Shell: 3.2.57 - /bin/bash
    Binaries:
      Node: 12.10.0 - /usr/local/bin/node
      Yarn: 1.13.0 - /usr/local/bin/yarn
      npm: 6.10.3 - /usr/local/bin/npm
    npmPackages:
      @tarojs/components: 3.0.2 => 3.0.2 
      @tarojs/mini-runner: 3.0.2 => 3.0.2 
      @tarojs/react: 3.0.2 => 3.0.2 
      @tarojs/runtime: 3.0.2 => 3.0.2 
      @tarojs/taro: 3.0.2 => 3.0.2 
      @tarojs/webpack-runner: 3.0.2 => 3.0.2 
      babel-preset-taro: 3.0.2 => 3.0.2 
      eslint-config-taro: 3.0.2 => 3.0.2 
      react: ^16.10.0 => 16.13.1 
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.3 

---

补充信息

文档 http://taro-docs.jd.com/taro/docs/router 中搜不到Taro.Current.router的文档，getCurrentInstance在3.0版本已过时。

文档中搜不到didShow生命周期的说明，不知道还是否支持这个生命周期

[taro-bot2[bot]]

您的 Issue 没有按照规范从 Taro Issue Helper 创建，因此会被直接关闭。

维护开源项目是一项非常辛苦的工作，还请多多包涵。
了解为什么这么严格？

[349989153]

同https://github.com/NervJS/taro/issues/6840

[349989153]

https://github.com/NervJS/taro/issues/7109 貌似也是，看起来这个bug前前后后19天了。。。

[349989153]

Taro怎么改源码调试呢？

比如我改了node_modules/@tarojs/taro-h5/dist/index.cjs.js的代码，然后重新npm run dev:h5，感觉并没有生效

[winnine]

支付宝小程序-函数式组件 ， 扫描普通二维码，获取不到二维码的参数，请问怎么解决

[winnine]

@Chen-jj

[winnine]

用的是useRouter这个api

[349989153]

@Chen-jj 请问这个bug现在是什么状态了？我看3.0.5的文档又说不用Current，改用getCurrentInstance。

我升级到3.0.7之后，在H5页面使用getCurrentInstance().router.params去获取参数，第一次是可以取到的，然而点击了浏览器的后退按钮，再使用getCurrentInstance().router.params去获取参数，就是undefined了。

一个可以复现的repo：https://github.com/349989153/taro-router-param

[349989153]

@Chen-jj 更新了可复现的repo

[Wujerry]

源代码 runtime/dist/runtime.esm.js: 2878

onShow() {
            Current.page = this;
            this.config = pageConfig || {};
            const path = getPath(id, this.options); // ---- this.options 为 undefined ----
            Current.router = {
                params: this.options,
                path: addLeadingSlash(this.route || this.__route__),
                onReady: getOnReadyEventKey(id),
                onShow: getOnShowEventKey(id),
                onHide: getOnHideEventKey(id)
            };
            raf(() => {
                eventCenter.trigger(getOnShowEventKey(id));
            });
            safeExecute(path, 'onShow');
        },

看了下源码, H5 返回的时候调用了 page.onShow() , 这时候 this.options 为 undefined , 这个 options 是在第一次进入该页面时调用page.onLoad() 方法传入的, 但是在返回时也就是调用 page.onShow() 时, 两个 page 不是同一个实例

[Chen-jj]

支付宝小程序-函数式组件 ， 扫描普通二维码，获取不到二维码的参数，请问怎么解决

@winnine 支付宝的扫码参数在 App 入口组件取的印象中是，getCurrentPageInstance() 获取的是页面路由参数。

试试：

// app.js 项目入口文件
class App extends Component {
  componentDidShow (options /* 这里有你想要的路由信息 */) {
  }

  render () {
    ...
  }
}