路由传参（！！！！）

路由传参（！！！！）

	类似的网络请求	配合使用	传参是否会显示在地址栏
params	post	name	不会
query	get	path/name	会

1、params传参

编程式

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    name: 'home', 
    params: { username: this.username },
  })
}

声明式

<router-link :to="{ name: 'home', params: { username: username } }">

取值方式：this.$route.params.username

2、query传参

声明式

data:{
  username: ''
},
login() {
  ...
  this.$router.push({
    path: '/home',
    query: { username: this.username },
  })
}

声明式

<router-link :to="{ path: '/home', query: { username: username } }">

取值方式：this.$route.query.username

注意：!!!

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

{
	path:'/login/:username',//这样就不会消失
	component:Params
}

例如在实际开发中，有一个新闻列表，点击每一列的标题就会跳转到对应的详情页，这时就需要用到路由传参