vue路由跳转携带参数的方式总结

 <router-link to="/detail?id=001&title=消息001"> 消息001</router-link>

<router-link :to="{
        name: 'detail',
        path: '/detail', 
        query: {
                id: '001',
                title: '消息001'
        }
}"

$route.query.xxx

<router-link :to="`/detail/${id}/${title}`"> {{ title }} </router-link> 

<router-link :to="{
        name: 'detail',
        path: '/detail',
        params: {
                id: '001',
                title: '消息001'
        }
}"

{
       name: 'detail',
        path: '/detail/:id/:title'
        component: Detail
} 

$route.params.xxx

{
    name:'detail',
    path:'/detail',
    component: Detail,
 
    /**
    方式一，值为对象，对象中的key-value会以props的形式传递给Detail组件，
    但是传递的值都是一样的，不推荐
    props: {
         id: '123',
         title: '消息001',
    },
    **/
 
    /**
    方式二，值为布尔值，若布尔值为真，就会把该组件收到的所有params参数，以props的形式传式传递给Detail组件， 但之这种方式只适用于params参数
    props: true,
    **/
 
    /**
    方式三，值为函数，内置传参$route，可以使用结构赋值形式
    **/
    props({query}){
        return {id: query.id, title: query.title}
    },

props({ query: { id, title } }) {
        return { id, title }

this.$router.push({
    name:  'detail',
    params: {
        id: xxx,
        title: xxx
    },
    /**
    query: {
        id: xxx,
        title: xxx
    }
    **/
})
 
this.$router.replace({
    name:  'detail',
    params: {
        id: xxx,
        title: xxx
    },
    /**
    query: {
        id: xxx,
        title: xxx
    }
    **/
})