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

weixin_30784945

于 2019-09-10 09:20:00 发布

阅读量350

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangqi2019/p/11495504.html

版权

本文详细介绍如何在Vue.js中通过路由进行参数传递，并在目标页面接收与监听这些参数变化的过程。具体步骤包括：在源页面设置按钮并绑定点击事件处理函数实现路由跳转；在目标页面使用$data和$router属性接收路由参数，并通过watch监听路由变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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,"333333333333333")
            },
        },
        data() {
            return {
                routerVal: this.$route.query
            }
        },
        mounted () {
            console.log(this.routerVal);
        },
    }
</script>