vue-router 传参方式 params与query对比

路由传参

路由传参的两种方式 params和 query

params方式也叫做动态路由匹配

query 与我们平时在url ?后面拼参数方式一样

两种方式的不同

1. 定义方式不同

//定义params传参
//需要在路由中声明参数
import user from '@/views/user'
const router = new VueRouter({
    routes:[
        //动态路由参数 以冒号开头
        {
         path:'/user/:id',
         component:user
        }
    ]
})

//query 传参不需要再router中定义 
import user from '@/views/user'
const router = new VueRouter({
    routes:[
        {
         path:'/user/',
         component:user
        }
    ]
})

2.传参方式不同

//主要区别在编程式导航
//params传参 通过name引入 通过params传参
this.$router.push({name:'user',params:{id:'1111'}})
//query传参 通过path引入 query传参 这里要注意 如果使用path 会忽略params属性
this.$router.push({path:'user',query:{id:'1111'}})

3.接收参数方式不同

//接收参数的属性不同
//params方式
this.$route.params.id
//query方式
this.$route.query.id

4.表现形式不同

//params方式 类似于post请求方式 参数并不会拼在url后面 安全不会暴露敏感数据
http://localhost:8080/#/user
//query方式 与get请求相投 参数会拼接在url后面
http://localhost:8080/#/user?id=1111

5.路由跳转方式不同

这一点值得注意 使用params方式传参 定义后的router只能带参数访问，不带参数是访问不了的 而query方式不带参数也可以直接跳转

ps：第一次发文章 有写的不对的地方欢迎大家指正 ，谢谢大家