在访问网站的时候，你可能会发现有的页面的 html 或 php 文件后面会有一些以 ? 开头的文本，这就是页面之间传递参数的方式。在 Vue 中对于使用了路由的动态组件来说，在跳转的时候也需要通过 URL 来传递参数。

下面就简单写一下 Vue 路由传递参数的方式。

通过 params 传递参数

下面使用 home 组件给 category 组件传递参数，路由配置如下：

const router = new routes({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/category/:id',
      name: 'category',
      component: category
    }
  ],
  mode: 'history'
})

注意 /category 后面的 /:id ，接收参数的组件路径后面需要包含 /:id 。

下面使用 router-link 标签来传递参数：

<router-link to="/category/java">Java</router-link>
<router-link to="/category/php">PHP</router-link>

上面两个链接的地址都指向了 category 组件，组件路径后面的 / 后面的内容就是参数值。第一个链接传递的是 java ，第二个链接传递的是 php 。

下面通过 JS 跳转的方式来传递参数：

this.$router.push({
  path: '/category/java'
})

上面传递的参数是 java 。

上面只是简单演示，所以参数都是写死的，实际开发中可能需要动态拼接参数。

上面给 category 组件传递参数，category 组件可以使用 this.$route.params.id 来接收参数。

s使用 params 方式传递参数，地址栏显示的地址如下：

http://xxx.com/category/java

最后的 java 就是参数。

使用 query 传递参数

在传递多个参数的情况下，使用 query 要更方便。

下面还是用 home 组件给 category 组件传递参数，路由配置如下：

const router = new routes({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/category',
      name: 'category',
      component: category
    }
  ],
  mode: 'history'
})

下面使用 router-link 标签来传递参数：

<router-link :to="{name: 'category', query: {user: 'jick', 'lan': 'java'}}">Java</router-link>
<router-link :to="{name: 'category', query: {user: 'jick', 'lan': 'php'}}">PHP</router-link>

router-link 的 to 属性如果要传入对象的话前面需要加 : 。

name 的值就是路由配置中配置的组件 name 。query 的值是一个对象，其中包含了参数名和参数值。上面分别传递了 user 和 lan 两个参数。

下面使用 JS 跳转的方式来传递参数：

this.$router.push({
  name: 'category',
  query: {
    user: 'jack',
    lan: 'java'
  }
})

name 也可以换成 path 。

category 组件可以使用 this.$route.query.user 和 this.$route.query.lan 来接收参数，其中的 user 和 lan 就是参数名。

query 方式传递参数，地址栏中的 URL 如下：

http://xxx.com?user=jack&lan=java

如果要传递中文或符号的话，建议先对参数值进行 URL 编码，接收的时候再解码。

响应路由参数的变化

如果只是参数改变 组件路由不变的话，组件是不会重新加载的，组件定义的钩子函数也不会执行。对于分页加载数据的组件来说，改变参数钩子函数也不会执行，即便点击浏览器的前进和后退组件也不会重新加载，只能刷新网页。

如果需要在参数改变的情况下触发某个函数就需要用 watch 来监听 $route 的变化，如下：

export default {
  name: 'category',
  watch: {
    $route() {
      //  当参数改变时就会执行 $route
    }
  }
}

当地址栏的参数改变时就会触发 $route 方法。

相关文章：