Vue路由传参

Vue路由传参

方式一：配置动态路由

• 页面刷新，参数不会消失
• URL路径中会显示传递的参数

// 1. 路由配置文件中配置动态路由
{
     path: '/detail/:id',
     name: 'Detail',
     component: Detail
 }
   
   
//2. 使用，跳转时页面
var id = 1;
this.$router.push('/detail/' + id)
//url形式： http://192.169.3.198/detail/1
 
//3. 跳转后页面获取参数
this.$route.params.id

方式二：通过query属性传值

• 使用path来匹配路由
• 页面刷新，参数不会消失
• query类似get，跳转之后页面的url后面会拼接参数，类似?id=1
• 目标组件在create生命周期中，通过this.$route接受

//1. 路由配置文件
{
    path: '/detail',
    name: 'Detail',
    component: Detail
}
   
//2. 跳转时页面
this.$router.push({
  path: '/detail',
  query: {
    name: '张三'，
    id: 1,
  }
})
//url形式： http://192.169.3.198/detail?id=1&name='张三'
 
//3. 跳转后页面获取参数对象（create生命周期）
this.$route.query

方式三：通过params属性传值

• 目标组件在create生命周期中，通过this.$route接受
• 通过路由属性中的name来确定匹配的路由
• 密文传参，页面不再url地址上显示
• 缺点：刷新页面后，参数就消失了

//1. 路由配置文件
{
     path: '/detail',
     name: 'Detail',
     component: Detail
   }
   
//2. 跳转时页面
this.$router.push({
  name: 'Detail',
  params: {
    name: '张三'，
    id: 1,
  }
})
 
//3. 跳转后页面获取参数对象（create生命周期）
this.$route.params

query和params传参的区别

1. params传参必须使用命名路由的方式传参
2. params传参不会显示在地址栏上，会保存在内存中，刷新就会丢失，可以配合本地存储进行使用
3. query的参数会显示在地址栏上，不会消失