uni-app学习：路由的跳转和携带参数跳转到tabBar页面

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