vue --》路由query 编程式导航传值与监听

1.首先在一个页面设置一个按钮，用于路由跳转

<template>
    <div>
        <button @click="handleToRouter">路由传值</button>
    </div>
</template>

<script>
    export default {
        components:{

        },
        data() {
            return {
            }
        },
        methods: {
            handleToRouter(){
                this.$router.push({
                    path:"/d",   //跳转的路径
                    query:{n:"我是a",b:"我是b"}  //传递的值
                })
            }
        },
    }
</script>

　　2。在另一个页面接受路由传递的值，并可以通过 $router 监听值的变化

<template>
    <div>

    </div>
</template>

<script>
    export default {
        watch: {
            //监听路由
            $route(val){
               console.log(val,"")
            },
        },
        data() {
            return {
                routerVal: this.$route.query
            }
        },
        mounted () {
            console.log(this.routerVal);
        },
    }
</script>