uniapp跳转的页面需要配置吗-猿码集

uniapp跳转的页面需要配置吗

起步

uniapp 是一款使用 Vue.js 开发跨平台应用的前端框架，可以用一套代码在多个平台上运行。在开发 uniapp 应用时，需要实现页面的跳转功能。但是，跳转前需不需要进行配置呢？

uniapp页面的跳转

uniapp 的页面跳转和 Vue.js 的页面跳转大同小异，都可以通过跳转地址或者路由的方式来实现。下面我们来看一下两者的区别。

在 Vue.js 中，我们可以使用 push 和 replace 方法进行路由跳转。如下所示：

this.$router.push('url');
this.$router.replace('url');

其中，push 方法可以添加历史记录，replace 方法则可以替换历史记录。这里的 url 可以是一个字符串或者一个路由对象。

而在 uniapp 中，你可以选择使用 uni.navigateTo 和 uni.redirectTo 方法进行页面跳转。如下所示：

uni.navigateTo({
  url: 'url'
});
uni.redirectTo({
  url: 'url'
});

其中，navigateTo 方法会创建一个新页面，而 redirectTo 方法则会关闭当前页面，然后打开一个新页面。这里的 url 应该使用相对路径，可以是一个字符串或对象类型。

需要进行配置吗？

在 uniapp 中，跳转页面并不需要进行额外的配置。只要在代码中设置好跳转方式即可。如下示例代码中，我们可以点击一个 button 来实现页面跳转：

// template 中
跳转到详情页
// script 中
methods: {
  navigateTo() {
    uni.navigateTo({
      url: '/pages/details/details'
    })
  }
}

注意：跳转时，请记得使用相对路径。

页面传参

有时候我们需要在跳转页面时传递参数。在 Vue.js 中，我们可以通过路由参数进行传递。如下所示：

// 定义路由
{
  path: '/details/:id',
  component: Details
}
// 通过路由传递参数
this.$router.push({
  path: '/details/' + id
});
this.$router.push({
  name: 'details',
  params: {
    id: id
  }
});

而在 uniapp 中，你可以使用 query 方式进行参数传递。如下所示：

// 跳转时传参
uni.navigateTo({
  url: '/pages/details/details?id=' + id
});
// 接收参数
onLoad(options) {
  console.log(options.id)
}

注意：传递参数时，请注意查询的 key 命名，以及在 onLoad 方法内接收参数。

总结

在 uniapp 中，页面的跳转和传参比较方便，不需要进行额外的配置。只要在代码中设置好跳转方式即可。但是，需要注意的是，在进行跳转时请记得使用相对路径。除此之外，还可以使用 query 的方式进行参数传递。

uniapp跳转的页面需要配置吗