Vue中传参query和params的区别

query传参

<router-link to="/page?name='张三'">query</router-link>

直接在path后面加 ?参数，页面跳转的时候，参数会传过去。

路由正常配置即可：

{
  path: '/page',
  name: 'page',
  component: Page
}

this.$router写法：

<button @click="goQuery()">query</button>
<script>
export default {
    methods:{
        goQuery(){
            this.$router.push({
                path:'/page',
                query:{name:'张三'}
            })
        }
    }
}
</script>

通过this.$router.push做路由跳转的话，query请求使用的是path，url会显示参数，所以，query 传参 类似于网络请求中的 get 请求

params传参

<router-link to="/page/124242aADqadFA">params</router-link>

路由要配置为：

{
  path: '/page/:id',
  name: 'page',
  component: Page
}

params传参是在/后面直接加参数传参，/page/id这样的url会直接映射到对应的路由，来达到传参的效果

this.$router写法：

<button @click="goParams()">params</button>
<script>
export default {
    methods:{
        goParams(){
            this.$router.push({
                name:'page',//只能为name
                params:{id:'124242aADqadFA'}
            })
        }
    }
}
</script>

通过this.$router.push做路由跳转的话，params使用的是name，并且url不会显示参数，所以，params 传参 类似于网络请求中的 post 请求

二者区别

1. query可以通过name或path来引入路由
2. params必需要用name来引入