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>
相关推荐
dy17172 小时前
element-plus表格默认展开有子的数据
前端·javascript·vue.js
2501_915918416 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂6 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技6 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip7 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go7 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x7 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java7 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)8 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5