Vue中的Vue-Router query方式和params方式详解

前言

在线路切换时，Vue提供了Vue-Router作为前端路由。

Vue-Router更好地配合Vue完成SPA（单页应用）的构造，相信很多使用过Vue-cli的开发者都踩过Vue-Router的坑。

本文将详细介绍Vue-Router的query方式和params方式作为前端路由传参。

区别

两种传参方式的区别，简单地说就是数据是否出现在URL路径中。

• query方式

query方式将参数以键值对的方式拼接在URL中，是传统URL参数接收的方式，如

http://localhost:8080/home?name=jerry&age=18

• params方式

params方式将参数直接插入到URL路径中，作为RESTful API的风格，比较直观易懂，如

http://localhost:8080/home/jerry/18

Query方式

在路由中，增加query属性即可使用query方式进行传参。如：

// router.js
{
  path: '/home',
  name: 'home',
  component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
  meta: {
    title: 'Home'
  },
  // query方式传参
  query: {
    name: '',
    age: 0
  }
}

在URL中传参的方式十分简单：

<!-- 路由的跳转 -->
<router-link :to="{path:'/home', query:{name:'jerry', age:18}}">Home</router-link>

<!-- 路径的跳转 -->
this.$router.push({path:'/home', query:{name:'jerry', age:18}})

跳转后URL中将会自动加入以下参数:

http://localhost:8080/home?name=jerry&age=18

接收参数的方式也很简单，在$router对象中，使用query即可:

this.$route.query.name;
// "jerry"

this.$route.query.age;
// "18"

该方法的缺点是显而易见的，比如参数过多时将会显得相当臃肿。

Params方式

在路由中，增加params属性即可使用params方式进行传参。如：

// router.js
{
  path: '/home/:name/:age',
  name: 'home',
  component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue'),
  meta: {
    title: 'Home'
  },
  // params方式传参
  params: {
    name: '',
    age: 0
  }
}

在URL中传参的方式与query方式略有不同：

<!-- 路由的跳转 -->
<router-link :to="{name:'home', params:{name:'jerry', age:18}}">Home</router-link>

<!-- 路径的跳转 -->
this.$router.push({name:'home', params:{name:'jerry', age:18}})

跳转后URL中将会自动加入以下参数:

http://localhost:8080/home/jerry/18

通过$route.params.xxx，我们可以获取到跳转页面时传过来的参数，如：

this.$route.params.name;
// "jerry"

this.$route.params.age;
// "18"

params方式传递参数清晰简辑，是使用Vue-Router进行页面跳转时推荐使用的一种方式。

示例

下面是一个结合Vue的计数器示例：

<!-- App.vue -->
<template>
  <div id="app">
    <h2>计数器: {{$route.params.count}}</h2>
    <div class="btn-group">
      <!-- 可以进行历史回退 -->
      <router-link :to="'/counter/' + (parseInt($route.params.count) - 1)">-</router-link>
      <!-- 可以进行历史前进 -->
      <router-link :to="'/counter/' + (parseInt($route.params.count) + 1)">+</router-link>
    </div>
    <br>
    <button @click="changeCount">button</button>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    changeCount() {
      // 这样的路由会重新触发mounted方法
      this.$router.push({
        path: '/counter/' + Math.floor(Math.random()*10)
      })
    }
  }
}
</script>

// router.js
import Counter from '../views/Counter.vue'

export default new Router({
  routes: [
    {
      path: '/counter/:count',
      name: 'Counter',
      component: Counter,
      // 计数器示例中使用params传参
      params: {
        count: 0
      }
    }
  ]
})

<!-- Counter.vue -->
<template>
  <div>
    <h3>计数器组件 内容: {{$route.params.count}}</h3>
  </div>
</template>

在这个示例中，使用params方式传递计数器的变化。点击+、-时，计数器将会增加或减少，并相应跳转到目标URL。

知识扩展

通过以上的学习，我们可以发现在Vue-Router中有一个相对较为难懂的API。

即：pathToRegexp

pathToRegexp('/home/:name/:age')

这个API将返回一个正则表达式对象，能够将指定参数提取出来。如：

const regexp = pathToRegexp('/home/:name/:age');
const paramsArr = regexp.exec('/home/jerry/18');

console.log(paramsArr[1]);
// jerry

console.log(paramsArr[2]);
// 18

使用这个API，你可以在编写一些插件时方便地进行路由匹配。