Vue-Router路由携带参数跳转3种方式大全，刷新页面参数不丢失，不显示到地址url中

此博客将详细介绍Vue-router传参的方法大全，以及如何刷新页面参数不丢失且不拼接到url中。

Vue-Router携带参数跳转的3种方式

Vue-Router 提供了多种传参的方式，具体如下：

1. parmas路由路径传参

在定义路由时，可以在路由路径中添加参数占位符，例如：/user/:id。

在路由路径中以 : 开头的是参数占位符，参数名称为 id。在匹配该路由时，例如访问 /user/1，会把参数 id 填入组件的 this.$route.params 对象中。

2. query查询参数传参

查询参数传参是在 URL 后面带上参数，例如：/user?id=1。

在 Vue-Router 中访问查询参数可以通过 $route.query 来获取，例如：

const user_id = this.$route.query.id

3. Props 传参

在路由组件中可以通过 props 将参数传递给组件，需要在路由配置中设置 props 属性：

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:id',
      component: User,
      props: true
    }
  ]
})

在这种情况下，参数会被设置为组件的 props，例如访问 /user/1，会把参数 id 传递给组件 User 的 props 中，可以通过 this.id 访问到。

4. 组件内部获取路由参数

在组件内部可以通过 this.$route.params 或者 this.$route.query 获取路由参数，在组件内部可以直接使用 $route 来访问组件的路由信息。

5. 根据路由名称传参

通过路由名称来传递参数，需要在定义路由时设置 name 属性，例如：

const router = new VueRouter({
    
    
  routes: [
    {
    
    
      path: '/user/:id',
      name: 'user',
      component: User
    }
  ]
})

在此处定义了一个名为 user 的路由，然后可以在其它地方通过 name 来访问该路由，例如：

this.$router.push({
    
    
  name: 'user',
  params: {
    
    
    id: 1
  }
})

可以通过 this.$route.params 获取参数。