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 访问到。

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

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

  1. 根据路由名称传参

通过路由名称来传递参数,需要在定义路由时设置 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 获取参数。

你可能感兴趣的:(前端,Vue,vue.js,javascript,前端)