Vue Router路由中 的$route.params和$route.query传参的区别和使用示例

一.简述

在实现页面跳转时，需要携带参数。在这里使用的是vue 中的路由Vue Router,使用前先安装依赖配置项目环境，具体操作参考windos环境安装Vue及配置环境

二. $router和$route的区别

$router : 是路由操作对象，只写对象
$route : 路由信息对象，只读对象

//操作 路由跳转
this.$router.push({
      name:'hello',
      params:{
          name:'word',
          age:'11'
     }
})

//读取 路由参数接收
this.name = this.$route.params.name;
this.age = this.$route.params.age;

三.route.params和$route.query的区别

• $route.params

类型: Object
一个 key/value 对象，包含了动态片段和全匹配片段，
如果没有路由参数，就是一个空对象。

• $route.query

类型: Object
一个 key/value 对象，表示 URL 查询参数。
例如，对于路径 /foo?user=1，则有 $route.query.user == 1，如果没有查询参数，则是个空对象。

四.params和query的使用

1.$route.params的使用

使用params传参只能使用name进行引入

router/index.js路由的配置文件中需要写name,否则获取不到信息会提示undefined

{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}

传参组件：test1.vue

接收参数组件：second.vue

2.$route.query的使用

传参组件：test2.vue

接收参数组件：second.vue

不管是path引入还是name引入效果都一样

注

1.params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系
2.params一旦设置在路由，params就是路由的一部分，
如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容
3.路由后面没有/:id/:name，地址栏没有参数
4.query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数，
而params相当于post请求，参数不会再地址栏中显示