vue-router如何进行传参

Vue-router可以通过path、name、params、query等方式进行传参。

1.通过path传参：

在路由配置中设置路由路径时，可以在路径中添加参数，如：

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

在组件中使用$route.params.id就可以获取到id的值。

2.通过name传参：

在路由配置中设置路由名称时，可以通过params属性进行传参，如：

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

在组件中使用this.$router.push({ name: 'user', params: { id: 123 }})进行跳转并传递参数，在接收参数的组件中可以使用$route.params.id获取参数值。

3.通过query传参：

在路由配置中设置路由路径时，可以在路径后面添加查询参数，如：

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

在组件中使用this.$router.push({ name: 'user', query: { id: 123 }})进行跳转并传递参数，在接收参数的组件中可以使用$route.query.id获取参数值。

注意：query传参会在URL地址中显示，而params传参则不会。

相关问题

vue-router 传参

在Vue.js应用程序中使用vue-router进行路由导航时，你可以使用路由传参来将数据传递给目标组件。

使用vue-router进行路由导航时，你可以通过在路由链接上添加路由参数或者使用编程式导航来传递参数。在路由链接中传递参数时，你可以在router-link的to属性中传递一个包含参数的对象，例如:

<router-link :to="{ name: 'user', params: { userId: 123 }}">用户详情页</router-link>

上面的示例中，我们通过params属性将参数传递给名为'user'的路由。在接收参数的组件中，你可以通过$route对象的params属性来获取传递的参数，例如：

export default {
  computed: {
    userId() {
      return this.$route.params.userId;
    }
  }
}

除了params属性，你还可以使用query属性来传递参数。与params不同，query参数不需要在路由配置中声明，因此它们通常用于非必要参数，例如搜索查询字符串。

<router-link :to="{ name: 'search', query: { q: 'vue router' }}">搜索</router-link>

在接收query参数的组件中，你可以通过$route对象的query属性来获取传递的参数，例如：

export default {
  computed: {
    searchQuery() {
      return this.$route.query.q;
    }
  }
}

总之，在Vue.js应用程序中使用vue-router进行路由导航时，你可以使用路由传参来传递数据给目标组件，方便灵活。

vue-router传参

Vue-router 传参可以通过在路由配置中定义动态路由参数，例如：

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

在这个例子中，`:id` 是一个动态路由参数，可以在组件中通过 `props` 接收：

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}

当访问 `/user/123` 时，组件会接收到 `id` 为 `123` 的 prop。