Vue 路由传递参数 query、params

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

javascript 复制代码
<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、字符串路径写法

javascript 复制代码
<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、接受页面接受参数

javascript 复制代码
<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=====================================

javascript 复制代码
<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>
相关推荐
mCell4 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip4 小时前
Node.js 子进程:child_process
前端·javascript
excel7 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel9 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼10 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping10 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙11 小时前
[译] Composition in CSS
前端·css
白水清风11 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix11 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780011 小时前
new、原型和原型链浅析
前端·javascript