当前位置：首页 > news >正文

Vue 路由传递参数 query、params

news 来源：原创 2025/6/21 23:55:25

1、to的对象写法,绑定参数

<template>
2  <ul>
3    <li v-for="m in messlist" :key="m.id">
4      <router-link :to="{ 
        //使用params时，这个路径必须用name及别名......name: 'xiangqing', 
        path: '/bbb/message/detail', 
        query: { id: m.id }}"> {{ m.title }}</router-link>
5    </li>
6  </ul>
7</template>

2、字符串路径写法

<template>
2  <ul>
3    <li v-for="m in messlist" :key="m.id">
4      <router-link :to="'/bbb/message/detail?id=' + m.id"> {{ m.title }}</router-link>
5    </li>
6  </ul>
7</template>

3、接受页面接受参数

<template>
    <div>
        <!---------直接接受参数-------->
        id是：{{ $route.query.id }}
        id是：{{ $route.query.title }}
        ===================================
        <br>
        <!-----------监听参数--------->
        id是：{{ title }}
        id是：{{ id }}
    </div>
</template>
<script>
export default {
    name: 'Detail',
    data() {
        return {
            'id': '',
            'title':''
        }
    },
    mounted() {
        console.log(this.$route)
    },
    watch: {
        '$route.query': {
            handler(newQuery) {
                // 根据需要更新组件的状态
                console.log(newQuery.id)
                this.id = newQuery.id
                this.title = newQuery.title
                //也可以通过axios获取数据渲染
            },
            immediate: true, // 立即执行一次，确保在首次渲染时也能触发
            deep: true // 监听对象内部属性的变化
        }
      
    },
}
</script>

===========================params=====================================

<template>
    <div>
        <!---------直接接受参数-------->
        id是：{{ $route.query.id }}
        id是：{{ $route.query.title }}
        ===================================
        <br>
        <!-----------监听参数--------->
        id是：{{ title }}
        id是：{{ id }}
        ===================================
        <!---------直接接受参数-------->
        <br>
        params接受id是：{{ $route.params.id }}
        params接受id是：{{ $route.params.title }}
        ===================================
        <br>
    </div>
</template>
<script>
export default {
    name: 'Detail',
    data() {
        return {
            'id': '',
            'title':''
        }
    },
    mounted() {
        console.log(this.$route)
    },
    watch: {
        // '$route.query': {
        //     handler(newQuery) {
        //         // 根据需要更新组件的状态
        //         console.log(newQuery.id)
        //         this.id = newQuery.id
        //         this.title = newQuery.title
        //     },
        //     immediate: true, // 立即执行一次，确保在首次渲染时也能触发
        //     deep: true // 监听对象内部属性的变化
        // }
        '$route.params': {
            handler(newQuery) {
                // 根据需要更新组件的状态
                console.log(newQuery.id)
                this.id = newQuery.id
                this.title = newQuery.title
            },
            immediate: true, // 立即执行一次，确保在首次渲染时也能触发
            deep: true // 监听对象内部属性的变化
        }
      
    },
}
</script>