uniapp에서 페이지 점프 및 전송 값을 구현하는 방법

{
  "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"
      }
    ]
  }
}

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

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

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

return {
  id: ''
}

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
  })
};