1.uni.navigateTo

需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。
注:页面跳转路径有层级限制,不能无限制跳转新页面
示例:

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}
2.uni.redirectTo

需要跳转的应用内非 tabBar 的页面的路径,路径后可以带参数。
实例:

uni.redirectTo({
    url: 'test?id=1'
});
 onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
    }
3.uni.reLaunch

关闭所有页面,打开到应用内的某个页面。
需要跳转的应用内页面路径 , 路径后可以带参数。可以跳转到tabBar页面但是跳转到tabBar页面拿不到传递的参数。
示例:

uni.reLaunch({
    url: 'test?id=1'
});
export default {
    onLoad: function (option) {
        console.log(option.id);
    }
}
4.uni.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
需要跳转的 tabBar 页面的路径(需在 pages.json 的 tabBar 字段定义的页面),路径后不能带参数
示例:
pages.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}
uni.switchTab({
    url: '/pages/index/index'
});
5.uni.navigateBack

关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层
示例:

// 注意:调用 navigateTo 跳转时,调用该方法的页面会被加入堆栈,而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack,将返回A页面
uni.navigateBack({
    delta: 2
});
6. 携带参数跳转到tab页面解决办法
方法一:定义全局变量

在app.js 定义全局变量

<script>
	export default {
		globalData:{
			cityName:'',
		},
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

赋值:

getApp().globalData.cityName= '上海'

取值:

console.log(getApp().globalData.cityName) // '上海'
方法二:使用 Vuex

1,安装vuex

npm install vuex --save
// 或者 
yarn add vuex 

2, 在项目中新建目录store 创建index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({  
    state: {  
		storeCityName:'测试store',
    },  
    mutations: {  
      
    }  
})

export default store

3.在main.js全局注册

import Vue from 'vue'
import App from './App'
import { myRequst } from './util/api.js'
import store from './store'  

Vue.prototype.myRequst = myRequst

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
    ...App,
	store
})
app.$mount()

像vue项目一样使用即可
例如:

this.$store.state.storeCityName // 测试store
Logo

前往低代码交流专区

更多推荐