vue路由传参接收以及传参对象为对象时的问题及解决_vue.js_

查看详情

const router = useRouter() const toDetail = () => {     // 我使用的是Vue3，router要从useRouter获取     router.push({ name: 'viewAttendPerson', params: { list: JSON.stringify(formObj.form.myMeetingParticipatorList) } }) }

import { useRoute } from "vue-router"; setup() {     const route = useRoute()     const data = JSON.parse(route.params.list) }

let data = this.$route.params.list data = JSON.parse(data)

routerlink传参   // 跳转后拿到参数 mounted () {   this.num = this.$route.params.num }     //num是在配置路由路径时定义好的   {path: '/a/:num', name: A, component: A}

push传参   methods: {     deliverParams (id) {       this.$router.push({         path: `/d/${id}`       })     }   }   //拿到参数 mounted () {   this.id = this.$route.params.id }   //路由配置 {path: '/d/:id', name: D, component: D}

//写好要push去到的组件名   params传参     deliverByName () {       this.$router.push({         name: 'B',         params: {           sometext: '一只羊出没'         }       })     }   //跳转后params拿到数据    //路由规则定义 {path: '/b', name: 'B', component: B}

//定义路由事件 query传参     deliverQuery () {       this.$router.push({         path: '/c',         query: {           sometext: '这是小羊同学'         }       })     }   //跳转后拿到数据    //路由配置 无需做任何额外配置 {path: '/c', name: 'C', component: C}

http://localhost:8080/#/c?sometext=%E8%BF%99%E6%98%AF%E5%B0%8F%E7%BE%8A%E5%90%8C%E5%AD%A6