Taro:路由

Taro:路由

  页面的配置是一般是存放在app.ts文件中,在react-hook中路由配置文件一般存放在app.config.ts中,

  在pages:[]中进行配置,配置的目的是首页加载项;当修改完成后,请结束进程,重新启动项目

  1.Taro.navigateTo: 是指跳转后,在浏览器端可以进行前进和后退的    相当于 $router.push

  2. Taro.redirectTo:是指跳转后,在浏览器端不论前进还是后退都停留在当前页   相当于$router.replace

   在vue中我会用到this.$router.params来获取路由,但是在Taro中使用此方法就会显示不好用并且会报错,报错的就是在你跳转的目标页面报错(reading params)

  因此就会有了已下的解决方案,在目标页面使用 Taro.getCurrentInstance().router.params;使用此方法来接收其他页面在路由中传递过来的值

 

  Taro:使用路由进行跳转的步骤:

  1.在app.config.ts中的pages中进行页面的配置,否则页面将会无法进行显示

  2.在跳转页我们进行一个点击事件来进行操作路由的跳转 

   当我们需要使用<Button></Button>的时候,我们还需要把Button在页面顶部的@taro/components中进行配置进去

  3.在跳转页面进行跳转操作,react中点击事件是onClick={this.handle}

  handle(){

    Taro.navigateTo({

      url:"目标页面的路径"

    })

  }

  4.如果需要进行携带参数的时候,我们需要第三步进行改动既可以

    handle(){

      Taro.navigateTo({

        url:"目标页面的路径?id=xxx&name=xxxx"

      })

    }

  5.在目标页面中我们可以在componentWillMount(){}函数中进行接收参数

  componentWillMount(){

    let {id} = Taro.getCurrentInstance().router.params //使用此方法进行接收数据

    //不能使用this.$router.params来接收数据,不然就会报错 (reading params)

  }

  注释:如果出现报错的情况(

* Move code with side effects to componentDidMount, and set initial state in the constructor. * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 18. x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

)请修改函数既可以

UNSAFE_componentWillMount(){
 
  父子级不可以使用Taro.getCurrentInstance.router.params,获取不到数据

 

posted @ 2022-05-09 10:33  一封未寄出的信  阅读(789)  评论(0编辑  收藏  举报