路由传参的方式主要有两种：params 和 query.

接下来我们先定义两个路由 ‘/home’ 和 ‘/profile’ 来分别看看这两种传参方式各自的用法和区别，下面的测试都是从路由 ‘/home’ 跳转到 ‘/profile’ ，参数也是从 ‘/home’ 传到 ‘/profile’ 。

    {
        path:'/home',
        component:Home,
    },
    {
        path:'/profile',
        component:ProFile
    },

 

  params 传参

1、使用 router-link 路由导航（此方法在路径中显示参数，页面刷新参数不丢失）

1）路由要进行如下配置（nums 相当于为传递的参数占位）:

　　

2）home 页面传递：

　　

　　如果传递的参数在 data 里面，router-link 路由跳转时可以进行动态绑定：

　　

3）profile 页面 params 获取：

　　

4）浏览器显示：

 　　

 

2、调用 $router.push.（此方法不在路径中显示参数，页面刷新参数丢失）

1）获取数据的路由需要添加 name 属性

　　

 2）home 页面传递：

　　

3）profile 页面 params 获取：

　　

 4）浏览器显示：

　　

 

  query 传参

1、使用 router-link 路由导航.（在路径中 ？后面显示参数，刷新页面参数不丢失）

1）路由不需要进行任何特殊配置

2）与 query 传参进行匹配的是 path

　　

 3）profile 页面 query 获取：

　　

 4）浏览器显示：

　　

 

2、调用 $router.push.（在路径中 ？后面显示参数，刷新页面参数不丢失）

1）路由不需要进行任何特殊配置

2）与 query 传参进行匹配的是 path

　

 3）profile 页面 query 获取：

　　

 4）浏览器显示：

　　

 

  总结

• params 不在路径中显示参数，页面刷新参数丢失(相当于post)； query 在路径中 ？后面显示参数，刷新页面参数不丢失(相当于get)。

• params 传参的时候只能使用name进行引入；query 传参的时候name，path都可以引入。

• params是路由的一部分,必须要在路由后面添加参数名，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容；query 是拼接在url后面的参数，没有也没关系。