本文已参与「新人创作礼」活动，一起开启掘金创作之路。

一、前言

本文主要介绍vue路由传参以及对应取值的方式。通过它们之间的差异与优缺点，让大家在实际开发中使用适合的传参方式，更好的完成项目任务。

二、实现方式

这里我们先做一些准备工作，创建一些路由，如下

// router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/page1',
    name: 'page1',
    component: () => import(/* webpackChunkName: "page1" */ '../views/Page1.vue')
  },
  {
    path: '/page2',
    name: 'page2',
    component: () => import(/* webpackChunkName: "page2" */ '../views/Page2.vue')
  },
  {
    path: '/page3/:id',
    name: 'page3',
    component: () => import(/* webpackChunkName: "page3" */ '../views/Page3.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

我们以这些路由为基础，开始往下讲如何传参。

1.通过query的方式传参

这种方式就是最常见的通过路由的path和query，来进行路由传参。使用query传参，参数会显示在地址栏上，这种就类似于get请求一般，可以直观地看到参数。代码如下

// 跳转时
this.$router.push({
    path: '/page1',
    query: {
        id: '1',
        name: 'world'
    }
})

// 获取query的参数
this.$route.query.id // '1'
this.$route.query.name // 'world'

如图

2.通过params的方式传参

这种方式就是通过name配合params来进行路由传参的。这里要注意path和params是不能配合传参的。这种方式传参类似于post一般，参数是不会显示在地址栏的，并且页面刷新后就取不到值了。代码如下

// 跳转时
this.$router.push({
    name: '/page2',
    params: {
        id: '1',
        name: 'world'
    }
})

// 获取query的参数
this.$route.params.id // '1'
this.$route.params.name // 'world'

如图所示，地址栏上并没有参数显示，并且咱们获取到了参数。

3.动态路由方式传参

第三种方式就是通过动态路由的方式进行传参，在路由配置的时候添加参数，使用这种方式，参数会显示在地址栏上，但是获取的时候要使用params来获取，并且刷新不会消失，因为参数就是路由的一部分。代码如下

{
    path: '/page3/:id',
    name: 'page3',
    component: () => import(/* webpackChunkName: "page3" */ '../views/Page3.vue')
}

之后我们在跳转page3这个页面的时候，可以这样写

// 跳转时
let id = 1
this.$router.push(`/page3/${id}`)

// 获取query的参数
this.$route.params.id // '1'

效果如图所示

最后总结一下三者之间的区别，如下表

	query	params	动态路由
刷新后值是否存在	是	否	是
取值属性	query	params	params
是否显示在地址栏	是	否	是

三、后记

以上就是三种路由传参的方式。另外使用标签<router-link>的方式，跟本文讲的push的方式传参方式，基本一样。大家可以自行参考点击查看vue-router3官方文档。

本篇完结！撒花！感谢观看！希望能帮助到你！

你猜vue路由传参的方式有几种？