vue router-link传参以及参数的使用实例

下面我将为您详细讲解“Vue Router-Link 传参以及参数的使用”。

什么是 Vue Router-Link？

Vue Router-Link 是 Vue.js 的一个路由组件，可以让你在 SPA（Single Page Application 单页应用程序）中实现页面跳转和参数传递。

如何使用 Vue Router-Link 传参？

使用 Vue Router-Link 传参非常简单，在 router-link 中添加 to 属性和 params 属性即可。

<router-link :to="{path:'/home', query:{key:value}}">跳转到首页</router-link>

在 to 属性中，可通过 path 字段传递跳转路由路径，通过 query 字段传递需要传递的参数，格式为 key:value。

<router-link :to="{path:'/user',params:{id:123}}">跳转到用户页面</router-link>

在 to 属性中，可通过 path 字段传递跳转路由路径，通过 params 字段传递需要传递的参数，格式为 key:value。

值得注意的是，使用 params 传递参数时，必须在路由配置中声明参数，否则路由会无法匹配。

Vue Router-Link 传参实例

实例一：首页按钮跳转到用户页面并传递参数

在首页按钮上添加 router-link 组件，传递需要跳转到的路由路径和参数。

<router-link :to="{path:'/user',params:{id:123}}">跳转到用户页面</router-link>

然后在定义路由时，配置接收参数的路由路径。

{
  path: '/user/:id',
  name: 'User',
  component: User
}

接下来在组件中通过 $route.params 获取传递的参数。

export default {
  name: 'User',
  data () {
    return {
      id: this.$route.params.id
    }
  }
}

这样就完成了参数的传递和接收。

实例二：查询用户信息并在用户页面展示

在用户列表中，添加跳转到用户页面的 router-link 组件。

<router-link :to="{path:'/user',params:{id:123}}">用户信息</router-link>

然后在定义路由时，配置接收参数的路由路径。

{
  path: '/user/:id',
  name: 'User',
  component: User
}

接下来在组件中通过 $route.params 获取传递的参数，并在 mounted 钩子中查询用户信息，并在页面上展示。

export default {
  name: 'User',
  data () {
    return {
      userInfo: {}
    }
  },
  mounted () {
    this.fetchUser(this.$route.params.id)
  },
  methods: {
    fetchUser (id) {
      // 查询用户信息的逻辑
      // this.userInfo = response.data
    }
  }
}

这样就完成了查询用户信息并在用户页面展示的需求。