uniapp页面间传参-父页面向子页面传递参数

uniapp中比较常用的就是页面间传递参数了。我这里举的例子是，当登录成功时，想主页面传递用户名。
话不多说，上主菜。
第一步：项目-store-index.js ：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        userName: "",
    },
    mutations: {
        login(state, userName) {
            state.userName = userName;
        },
    }
})

export default store

第二步：登录(login.vue)页面传递参数：

<template>
    <view class="content">
        <view class="input-group">
            <view class="input-row border">
                <text class="title">账号&ensp;|</text>
                <m-input class="m-input" type="text" clearable focus v-model="u_mobile" placeholder="请输入账号"></m-input>
            </view>
            <view class="input-row">
                <text class="title">密码&ensp;|</text>
                <m-input type="password" displayable v-model="u_pwd" placeholder="请输入密码"></m-input>
            </view>
        </view>
        <view class="btn-row">
            <button type="primary" class="primary" @tap="bindLogin">登录</button>
        </view>
    </view>
</template>

<script>
    import service from '../../service.js';
    import {
        mapState,
        mapMutations
    } from 'vuex'
    import mInput from '../../components/m-input.vue'

    export default {
        components: {
            mInput
        },
        data() {
            return {
                u_mobile: '',
                u_pwd: '',
            }
        },
        methods: {
            ...mapMutations(['login']),
            bindLogin() {
                /**
                 * 此处为 对账号信息进行一些必要的校验。
                 * 省略不写。
                 */
                 
                /**
                 * 校验合格后，使用 uni.request 将账号信息发送至服务端，客户端在回调函数中获取结果信息。
                 */
				uni.request({
					url: 'http://10.10.161.60:10864/installment/client/pwdLogin', //接口地址。
					method: 'POST',
					data: {
						uMobile: this.u_mobile,
						uPwd: this.u_pwd,
					},
					success: (res) => {
						var jsObject = res.data;
						
						if(jsObject.msg_code === 0){
							uni.showToast({
							    icon: 'none',
							    title: '账密登录成功!'
							});
							this.toMain(this.u_mobile);
							return;
						}
					}
				});
            },
            toMain(userName) {
                this.login(userName)；
                uni.navigateTo({
                     url: '../main/main',
                 });
            }
        },
    }
</script>

第三步：主页面(main.vue)接收参数：

<template>
	<view class="content">
	    <view v-if="hasLogin" class="hello">
			<view class="ul">
				<view class="title">您好，{{userName}}。</view>
			</view>
	    </view>
	</view>
</template>

<script>
    import {
        mapState
    } from 'vuex'

    export default {
        computed: mapState([ 'userName']),
		data() {
			return {
				userName: this.userName,
			};
		},
    }
</script>

此时，主页面就已经接收到用户名了。

如有不明白之处，欢迎留言。