uni-app学习:路由的跳转和携带参数跳转到tabBar页面
1.uni.navigateTo需要跳转的应用内非 tabBar 的页面的路径 , 路径后可以带参数。注:页面跳转路径有层级限制,不能无限制跳转新页面示例://在起始页面跳转到test.vue页面并传递参数uni.navigateTo({url: 'test?id=1&name=uniapp'});// 在test.vue页面接受参数export default {onLoad: func
·
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
更多推荐
已为社区贡献4条内容
所有评论(0)