一、背景
在进行vue开发的时候会涉及到一个问题，就是我们需要对路由进行静态处理，如下面两种情况，可以跳到目标页面：
1. url中直接带上url类型（path/param）
http://localhost:8080/#/movieDetail/123
2. 请求参数类型（path/?query）
http://localhost:8080/#/movieDetail?movieId=123
二、方法
使用下面的方法对跳转路由传参
2.1 路由配置
在index.js路由的的配置参数，按照下面的方法配置路由，包括上述提到的两种方式。
2.1.1 path/param
对于path/param这样的路由，使用下面的方法进行配置，在path之后带上：param就可以获取到参数并转化成对应的参数。
{
path: '/movieDetail/:movieId',
name: "movieDetail",
component: movieDetail,
},
截图：
2.1.2 path/?query
对于path?query这样的路由，使用下面的方法来获取参数，由于是query请求，因此不需要将参数构建在路由上。
{
path: '/movieDetail',
name: "movieDetail",
component: movieDetail,
},
截图：
2.2 路由使用
在需要的地方使用router-link
2.2.1 path/param
在需要跳转的地方使用router-link进行界面的跳转
1. 使用to直接构建跳转路由
<router-link :to="'/movieDetail/'+132"></router-link>
2.使用path的参数跳转路由
<router-link :to="{path:'/movieDetail/'+123}"></router-link>
3.使用name和params实现路由跳转
<router-link :to="{name:'movieDetail', params:{movieId:123}}"></router-link>
（注意movieId必须和路由中的参数保持一致，才可以展示出来）
2.2.2 path/?query
使用以下的方法完成路由的跳转传参
1. 使用to直接构建跳转路由
<router-link :to="'/movieDetail'+'?movieId=123'"></router-link>
2.使用path的参数跳转路由
<router-link :to="{path:'/movieDetail'+'?movieId=123'}"></router-link>
3.使用name和query实现路由跳转
<router-link :to="{name:'movieDetail', query:{movieId:123}}"></router-link>
4.使用path和query实现路由跳转
<router-link :to="{path:'/movieDetail', query:{movieId:123}}"></router-link>
2.3 路由解析
跳转到目的路由之后将进行路由的解析。路有对象有以下的两种：
this.$route //只读、具备信息的对象
this.$router //具备功能的函数
// 因此使用this.$route进行路由解析
// 解析path/params的路由参数
console.log(this.$route.params);
// 解析path?query的路由参数
console.log(this.$route.query);
三、总结
3.1 构建需要
根据使用的方法，如果是是下面例子中（1）的配置就无法使用path/param，如果按照（2）的配置就可以
（1）这种请求方式无法构造出path/params的路由方式
{
path: '/movieDetail',
name: "movieDetail",
component: movieDetail,
},
（2）这种请求方式，可以构造path/params也可以使用到
{
path: '/movieDetail/:movieId',
name: "movieDetail",
component: movieDetail,
},
3.2 name和path的区别
1.相同
都可以用于构建路由，实现路由跳转
2.不同
（1）path实现path/params的方式只有to或者path+params的方式，不能够使用params参数，而name可以使用params。
（2）path会忽略params，name不会，可以使用query和params；构造更灵活。
3.3 路由构建的方式
1. 字符串
直接构建简单路由，但是构建复杂的路由不够灵活，如query的请求
2. name+query/params
可以使用params和query两种数据传参的方式。
params在path/params时会将传过来的值解析到路由中。构建params的方法。
query会存在router的对象中，会将结果以get的方式作为路由。构建query的方法。
构造方式灵活，对于路由的配置要求也不限制，在有无参数的情况下都可以构造出需要的路由。
3. path
直接构建跳转的路由，能构建path?query的动态请求，也能够构建path/params的动态请求。
但是对于路由的设置要求严格，如果没有设置path/params的情况就不会出现结果跳转。name不会影响。
3.4 路由构建推荐
对于path/param的路由直接使用str+param的方式
对于path?query的路由使用path+query的参数构建
四、参考
关于路由传参的内容较多，这篇做了一个总结。
详细介绍：https://blog.csdn.net/qq_35393869/article/details/80251099
