uniapp怎么实现页面跳转并传值-uni-app-PHP中文网

uniapp怎么实现页面跳转并传值

PHPz

发布： 2023-04-27 09:03:17

原创

5496人浏览过

随着移动互联网的发展，app的开发得到了一定的普及，app的开发有许多技术难点，其中页面的跳转和传参是必须掌握的技术之一。而uniapp作为一款多端开发框架，其页面跳转和传值的实现更加简单方便。本文将重点介绍uniapp页面跳转并传值的方法。

一、uniapp页面跳转

uniapp页面跳转有两种方式，一种是通过底部的tab栏实现页面跳转，另一种是通过代码实现页面的跳转。

1.通过底部tab栏实现页面跳转

在uniapp框架中，页面的跳转可以通过uniapp内置的底部tab栏实现。在pages.json文件中配置底部tab栏，在tab栏中添加需要跳转的页面路径即可实现页面跳转。

下面是一个简单的pages.json文件配置底部tab栏的代码：

{
  "pages": [
    //tab栏页面
    {
      "path": "pages/index/index",
      "name": "index",
      "iconPath": "static/img/tab-home.png",
      "selectedIconPath": "static/img/tab-home-selected.png"
    },
    {
      "path": "pages/mine/mine",
      "name": "mine",
      "iconPath": "static/img/tab-mine.png",
      "selectedIconPath": "static/img/tab-mine-selected.png"
    }
  ],
  "globalStyle": {
    "navigationBarTitleText": "uni-app"
  },
  "tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#333",
    "selectedColor": "#007aff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/img/tab-home.png",
        "selectedIconPath": "static/img/tab-home-selected.png"
      },
      {
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "static/img/tab-mine.png",
        "selectedIconPath": "static/img/tab-mine-selected.png"
      }
    ]
  }
}

登录后复制

2.通过代码实现页面跳转

通过代码实现页面跳转需要用到uniapp框架提供的uni.navigateTo和uni.redirectTo方法。前者是保留当前页面，跳转到应用内的某个页面，而后者是关闭当前页面，跳转到应用内的某个页面。

下面是通过代码实现页面跳转的示例代码：

//保留当前页面，并跳转到某个页面
uni.navigateTo({
    url: 'pages/detail/detail?id=123'
});

//关闭当前页面，并跳转到某个页面
uni.redirectTo({
    url: 'pages/login/login'
});

//返回上一页面
uni.navigateBack();

登录后复制

二、uniapp页面传值

在某些场景下，我们需要将数据从一个页面传递到另一个页面。对于uniapp页面传值，常常使用前端常见的两种方式：URL传参和Vuex状态管理。

1.URL传参

牛面

牛面AI面试，大厂级面试特训平台

147

查看详情

在uniapp中，使用URL传参的方式也是比较常见的，我们可以在跳转到目标页面时，将需要传递的数据作为参数拼接在URL地址上，然后在目标页面中通过$Route对象进行获取。

下面是一个简单的URL传参的示例代码：

//跳转到目标页面，并将id作为参数传递
uni.navigateTo({
url: '/pages/detail/detail?id=12'
});

//在目标页面中获取参数
export default {
data () {

return {
  id: ''
}

登录后复制

},
onLoad (options) {

this.id = options.id

登录后复制

}
}

2.Vuex状态管理

另一种方式是使用Vuex状态管理。通过Vuex将数据存储在全局store对象中，从而实现多个页面间数据的共享。

下面是一个Vuex状态管理的示例代码：

//store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    name: 'uniapp'
  },
  mutations: {
    setName (state, name) {
      state.name = name;
    }
  }
});

export default store;

//需要传递数据的页面
import { mapState } from 'vuex';

export default {
  data() {
    return {
      inputName: ''
    };
  },
  methods: {
    setName() {
      this.$store.commit('setName', this.inputName);
    }
  }
};

//需要获取数据的页面
import { mapState } from 'vuex';

export default {
  computed: mapState({
    name: state => state.name
  })
};

登录后复制

上述代码中，首先定义了一个全局的store对象，并定义了一个state变量和一个mutations方法，用于更新state中的数据。当需要传递数据的页面需要修改数据时，调用mutations方法更新state中的数据。当需要获取数据的页面需要获取数据时，通过计算属性调用mapState方法获取state中的数据。

总结：

以上是uniapp页面跳转并传值的两种方式，URL传参和Vuex状态管理，在应用开发过程中，应根据业务需求选择合适的方式进行页面跳转和数据传递，以实现高效、稳定和可维护的应用程序。

以上就是uniapp怎么实现页面跳转并传值的详细内容，更多请关注php中文网其它相关文章！