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>
相关推荐
hahala233312 分钟前
ESLint 提交前校验技术方案
前端
夕水34 分钟前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
Winwin36 分钟前
js基础-数据类型
javascript
Winwin37 分钟前
哈?Boolean能作为回调函数?
javascript
我麻烦大了37 分钟前
实现一个简单的Vue响应式
前端·vue.js
Shartin41 分钟前
CPT208-Human-Centric Computing: Prototype Design Optimization原型设计优化
开发语言·javascript·原型模式
独立开阀者_FwtCoder44 分钟前
你用 Cursor 写公司的代码安全吗?
前端·javascript·github
dme.1 小时前
Javascript之DOM操作
开发语言·javascript·爬虫·python·ecmascript
Cacciatore->1 小时前
React 基本介绍与项目创建
前端·react.js·arcgis
摸鱼仙人~1 小时前
React Ref 指南:原理、实现与实践
前端·javascript·react.js