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进行路由导航时，你可以使用路由传参来传递数据给目标组件，方便灵活。