Vue --- router，params和query传递参数并接收

在mounted方法可以取到路由参数

方法一：params 传参

this.$router.push({
    name:"admin",
　　　　//这里的params是一个对象，id是属性名，item.id是值(可以从当前组件或者Vue实例上直接取)
    params:{id:item.id}
})    
 
//这个组件对应的路由配置
{
　　//组件路径
  path: '/admin',
　　//组件别名
  name: 'admin',
　　//组件名
  component: Admin,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

通过 params 传递参数，如果我们想获取 id 的参数值，可以通过 this.$route.params.id。

//vue接收页面
let id= this.$route.params.id;
let name= this.$route.params.name;
特别注意：获取参数的时候是 $route，跳转和传参的时候是 r o u t e r 。（注意 router。 （注意router。（注意route与$router的区别）
1
2
3
4

方法二：路由属性配置传参

this.$router.push({
    path:"/admin/${item.id}",
})    
 
//这个组件对应的路由配置
{
　　//组件路径
  path: '/admin:id',
　　//组件别名
  name: 'admin',
　　//组件名
  component: Admin,
}
1
2
3
4
5
6
7
8
9
10
11
12
13

通过路由属性配置传参我们可以用 this.$route.params.id 来获取到 id 的值。

//vue接收页面
let id= this.$route.params.id;
let name= this.$route.params.name;
⚠️注意：this.$router.push 方法里面路径带的是值，路由配置项那里带的是变量名(属性名)来实现的对应。
1
2
3
4

方法三：query 传参

this.$router.push({
	name:"/admin",
	query:{
	    id：item.id,
	    name：item.name,
	}
})

//这个组件对应的路由配置
{
　　//组件路径
  path: '/admin',
　　//组件别名
  name: 'admin',
　　//组件名
  component: Admin,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

通过 query 传参，如果我们想获取 id 的参数值，可以通过 this.$route.query.id。

//vue接收页面
let id= this.$route.query.id;
let name= this.$route.query.name;
用 query 传参可以解决页面刷新参数消失问题，这种方式可以理解为是 ajax中的 get 方法，参数是直接在 url 后面添加的，参数是可见的。
1
2
3
4

方法四：localStorage

// 存数据
localStorage.setItem("numbers", JSON.stringify(this.numbers));
// 取数据
this.numbers = JSON.parse(localStorage.getItem("numbers"));
但是注意使用 localStorage 时，如果变量名起的过于普通可能容易被其它页面存的数据覆盖。
1
2
3
4
5

三、params和query的区别
除了params可以传递参数，query也可以，写法其实很相似，
区别在于
1、params需要用name来引入，query需要path来引入
2、query类似于ajax中get传参，params类似于post，即query在浏览器地址栏中显示参数，params不显示
params的

1、params 方式传递和接收参数

//传参
this.$router.push({
  name: 'checkDetailInfo',
         params:{
             fkdNum:fkdNum,
             jyayStr:jyayStr,
             defaultStr:defaultStr,
             detailViewBtn:detailViewBtn
             }
   });
 //接收参数
this.toplistInfo = this.$route.params;
1
2
3
4
5
6
7
8
9
10
11
12

2、query传参

//传参
this.$router.push({
  path: '/checkDetailInfo',
         query:{
             fkdNum:fkdNum,
             jyayStr:jyayStr,
             defaultStr:defaultStr,
             detailViewBtn:detailViewBtn
             }
         });
  //接收参数
  this.$route.query
1
2
3
4
5
6
7
8
9
10
11
12

小结
#####1、区别：如图可以清楚看出，query相当于get请求，页面跳转时，地址栏有请求的参数。params相当于post请求，参数不会在地址栏显示出来。
#####2、 params传参，push里面只能是 name:‘xxxx’，注意配对使用，否则接收参数为undefined。

3、router 和route区别
r o u t e r 为 V u e R o u t e r 实 例 ， 想 要 导 航 到 不 同 U R L ， 则 使 用 router为VueRouter实例，想要导航到不同URL，则使用router为VueRouter实例，想要导航到不同URL，则使用router.push方法
$route为当前router跳转对象，里面可以获取name、path、query、params等

路由传参分为 params 传参与 query 传参

params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。
如果用到了动态路由：‘/user/:id’，那么params就不会类似于post请求，传递过去的就是params参数，会拼接显示在地址栏中，比如：/user/13。
query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用（亲测可用）。
1
2
3

name是什么呢？name 是配置路由时给 path 取的别名，方便使用。但要注意的是 “地址栏显示的路径始终是 path 的值”

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  }
]
1
2
3
4
5
6
7
8
9
10
11

name 最重要的一点就是配合 params 进行路由的参数传递。我们来看一个列子：当我们登录之后我们需要把用户名带到主页进行展示。当然方法有许多比如localStorage，sessionStorag，中央事件总线bus，但我们这里需要学习路由传参。

方式一：通过 params 传参
编程式

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    name: 'home', //注意使用 params 时一定不能使用 path
    params: { username: this.username },
  })
}
1
2
3
4
5
6
7
8
9
10

声明式

1

取值：this.$route.params.username

方式二：通过 query 传参
编程式

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    path: '/home',
    query: { username: this.username },
  })
}
1
2
3
4
5
6
7
8
9
10

声明式：

1

取值：this.$route.query.username

params 传参后，刷新页面会失去拿到的参数。所以路由参数要修改为 ‘/login/:username’（官方称为动态路由）

const routes = [
  {
    path: '/login',
    component: Login
  },
  {
    path: '/home/:username',
    name: 'home',
    component: Home
  }
1
2
3
4
5
6
7
8
9
10

但是这样就不会类似于 post 请求，他会把接收到的参数替换作为地址。

假如传入参数为：params: { username: ‘admin’}，那么最终访问的地址为：http://localhost:8080/home/admin

总结

通过登录的例子来看，如果用户名不是敏感信息，可以直接放在地址栏中（使用query参数）
为什么不用params传参？由于 params 传参不能刷新。或满足刷新需求，但要对地址进行修改，用户名一样会显示在地址栏中