Vue,this.$route reported an error Property or method "toJSON"

A very simple template. If you want to take the parameters on the route, you will report the following error

clipboard.png


console.log,

clipboard.png

the address bar is
xxx.xxx.com/-sharp/loading?ck=123456&id=123456

here is my code

<template>
    <div class="loadpay">
        <v-header title="..." text="" @back="back" ref="header" style="z-index:9">
            <i class="iconfont icon-jiantouzuo" slot="back"></i>
        </v-header>
        <div>
            <img src="../../assets/images/loading.png">
        </div>
    </div>
</template>
<script>
    import vHeader from "components/header"
    import {getUrl, getCode} from "utils/axios"
    export default {
        name: "loadpay",
        components: {
            vHeader
        },
        mounted () {
            console.log(this.$route)
        },
        methods: {
            back () {
                this.$router.push({
                    path: "/"
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import "~styles/variables.scss";
    .loadpay{
        text-align: center;
        width: 100%;
        img{
            padding-top: 5rem;
            width: 40%;
        }
    }
</style>

seek solutions from all kinds of gods.

Jan.29,2022

later found the problem, because I directly console.log (this.$route)
in this component, so I will report that toJSON is not defined

if console.log (this.$route.query) will not report an error. I don't know why.


is not received in props? I reported such an error before because I did not receive


.

get parameters through routing, is this the form of this.$route.toJSON? If so, you need to jump the route at the next level and write the parameter toJSON in the route. As follows:

 this.$router.push({
    path: '/aaa',
    name: 'aaa',
    params: {
        bb: 'bb',
        cc: 'cc'
    }
  })


the error report is already obvious. There is a toJSON in the vHeader component that is not defined.

Menu