vue的路由传参

vue的两种传参方式：
router-link传参方式，
$router方式传参
1、router-link传参方式：

    <router-link
        :to="{
            path: 'yourPath',     //要跳转的路径
            params: {        //要传的参数
                name: 'name',
                dataObj: data   
            },
            query: {
                name: 'name',
                dataObj: data
            }
        }"
    >

注意： params和query传送参数同样是key:value形式传递，但query是通过url来传递参数。

2、$router方式传参

    //点击A页面中的按钮传参到B页面
    <template>
        <button @click="sendParams">传递</button>
    </template>
    <script>
        export default {
            name: '';
            data(){
                return {
                    msg: 'test message'
                }
            },
            methods: {
                sendParams(){
                    this.$router.push({
                        path: 'yourPath',
                        name: '要跳转的路径的name，在router文件夹下的index.js文件内找',
                        params: {
                            name: 'name',
                            dataObj: this.msg
                        }
                        /*
                            query: {
                                name: 'name',
                                dataObj: this.msg
                            }
                        */
                    })
                    /*方法二：this.$router.push('/yourPath?rule=new');    定义一个变量rule用来存储要传的参数new*/
                }
            }
        }
    </script>

    //B页面接收传过来的值
    <template>
        <h3>{{msg}}</h3>
    </template>
    <script>
        export default {
            name: '',
            data(){
                return {
                    msg: ''
                    /*方法二：msg: this.$route.query.rule,  //获取路由传过来的参数*/
                }
            },
            methods:{
                getParams(){
                    //取到路由传过来的参数，将数据放在当前组件的数据内
                    this.msg = this.$route.params.dataobj;
                }
            },
            watch: {
                //监测路由变化，只要变化了就调用获取路由参数
                '$route': 'getParams'
            }
        }
    </script>

作者：rookie.he（kuke_kuke）
博客链接：http://blog.csdn.net/qq_33599109
欢迎关注支持，谢谢！