04路由跳转并携带参数

04路由跳转并携带参数

首先写一个button按钮，再为它绑定上一个事件

<button bindtap="skip" type="primary">跳转</button>

然后为他绑定一个参数

<button bindtap="skip" type="primary" data-name="朱元">跳转</button>

然后为这个事件编写跳转的逻辑

  skip(){
    
   wx.navigateTo({
    
      url: '/pages/logs/logs'
  })
   },

注意!!! 在实际开发中会遇到，一个特别奇葩的问题，就是你的路径都写对着，跳转方式也写对着，但是还是没法跳转。这是因为有缓存，或者没有及时更新，我们可以清楚缓存，和把这个项目重新导入，就恢复正常了，这也是微信小程序的一个bug。要不就是你什么都不要做，静等十几分钟，这个项目的跳转功能也能恢复正常。

下来我们来看如何实现携带参数功能，因为在html页面，我们已经通过如下的方法携带了一个参数了，我们现在需要将这个参数传递给跳转后的页面

data-name="朱元"

我们看以下实际的代码

在这里插入代码片

一定要先将不检验合法域名打开，不然没办法拿到携带的参数

注意！此时如果有出现了bug，我们需要将这个项目关闭，然后重新导入以下，这样看来微信小程序开发者工具有时候还是挺坑的。我们可以通过调试基础库来实现一个重新导入的效果

然后，我们就可以在另外一个页面拿到这个参数了

 onLoad: function (options) {
    
    console.log(options.name);
    
  },

微信小程序还为我们准备了专门用于实现跳转的标签

<navigator open-type="navigate" url="pages/index/index">跳转</navigator>

open-type这个属性可以不写，默认就是navigate

那么怎么传参呢？

<navigator open-type="navigate" url="pages/index/index?id=1">跳转</navigator>

从别的页面接收这个传过来的参数，还是一样的方法

 onLoad: function (options) {
    
    console.log(options.name);
    
  },

最近也是写着写着代码发现了很多问题，就是最新版本的微信开发者工具已经解决了

就是你的路径都写对着，跳转方式也写对着，但是还是没法跳转

这个问题，就是不用重新加载这个项目，也不会出现bug了，但是最新版本的微信开发者工具没办法完美的使用vant组件库，这个就很难受，因为它没有

使用npm模块

这个选项