vue-router 前端路由之路由传值的方式详解

关于“vue-router 前端路由之路由传值的方式详解”的攻略，我会详细讲解两种常用的路由传值方式，以及每种方式的优缺点和适用场景。同时也会提供两个示例来讲解如何使用这些传值方式。

1. 通过路由参数传递数据

1.1 传递参数的方式

vue-router允许我们通过在路由定义时添加参数来传递数据。在route对象中我们可以通过$route.params来访问这些参数。在声明路由时，我们可以使用:符号来设置动态参数，例如：

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

在这个例子中，当访问/user/123时，id会被设置为123。你可以在访问组件的时候访问该值。

1.2 优缺点

这种方式的优点在于它非常简单，易于使用。同时，在浏览器的地址栏中可以看到传递的参数，便于调试。但这种方式会有一些限制：

• 传递的数据必须是字符串，如果要传递对象或数组，必须先将它们序列化为字符串。
• 传递的数据大小受浏览器地址栏的长度限制。在IE中，地址栏的长度限制是2083个字符。同时，不同浏览器的长度限制可能还会有所不同。

1.3 示例说明

下面通过一个例子来说明如何用动态参数传递数据。

假设你在一个网站上开发一个博客应用程序，用户可以在首页上点击博客列表中的某个博客来查看更多信息。你希望通过路由传递博客的ID号，以便在下一页面向服务器发起请求来获取博客的详细信息。

// 定义路由
const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/blog/:id',
    name: 'blog',
    component: Blog
  }
]

// 跳转到博客页面
router.push({ name: 'blog', params: { id: blog.id } })

在Blog组件中，你可以通过$route.params.id来获取传递过来的博客ID。

// 获取博客ID并向服务器发起请求以获取博客详细信息
mounted () {
  const blogId = this.$route.params.id
  axios.get(`/api/blog/${blogId}`)
    .then(response => {
      this.blog = response.data
    })
}

2. 通过查询字符串传递参数

2.1 传递参数的方式

另一种常用的路由传递参数的方式是通过查询字符串（query string）传递参数。我们可以使用$route.query属性来访问这些参数。在声明路由时，我们可以使用?符号来设置查询字符串参数, 例如：

{
  path: '/blog',
  component: Blog,
  props: route => ({
    id: route.query.id
  })
}

在这个例子中，当访问/blog?id=123时，id会被设置为123。你可以在访问组件的时候，将query属性作为属性传递给组件。

2.2 优缺点

这种方式的优点在于它可以传递任何类型的数据，而且不受浏览器地址栏的长度限制。但对于一些功能复杂的应用，如果需要传递大量的数据，则每次跳转时都要在URL上添加queryParams，会导致URL变得非常长，可能会影响应用体验。

2.3 示例说明

下面通过一个例子来说明如何用查询字符串传递数据。

假设你在一个网站上开发一个商品列表，用户可以通过筛选条件来获取商品。你需要将筛选条件传递给商品列表页面。

// 定义路由
const routes = [
  {
    path: '/products',
    name: 'products',
    component: Products
  }
]

// 跳转到商品列表页面并传递筛选条件
router.push({ name: 'products', query: { category: 'phones', price: 500 } })

在Products组件中，你可以通过$route.query来获取筛选条件。

// 获取筛选条件并向服务器发起请求以获取商品列表
mounted () {
  const category = this.$route.query.category
  const price = this.$route.query.price
  axios.get(`/api/products?category=${category}&price=${price}`)
    .then(response => {
      this.products = response.data
    })
}

以上就是 vue-router 路由传值的两种常用方式的详细说明和示例。