前言：前端路由是由于 ajax 的崛起而诞生的，我们大家都知道 ajax 是浏览器为了实现异步加载的一种技术方案，刚刚也介绍了，在前后端没有分离的时候，服务端都是直接将整个 HTML 返回，用户每次一个很小的操作都会引起页面的整个刷新，而一个项目经常就是几十个页面之间来回跳转，一致刷新就会影响用户的体验，但是几十个页面（url 地址）相互跳转，怎么前端怎么知道 url 对应展示什么内容呢？此时就需要前端的路由了。 可以理解为，前端路由就是将之前服务端根据 url 的不同返回不同的页面的任务交给前端来做。

如图：

一、路由传参的介绍：

路由传参分为 params 传参与 query 传参
params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中。params 只能配合 name 使用，不能和path一起使用。
query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用。

二、具体的实例demo如下：

params传参之后，刷新页面会失去拿到的参数，所以路由修改为'/first/:name/:hobby'(就是动态路由)，可以观察second中的params传递的name和hobby可以得知，其中最外面的name：“ff”是来匹配路由的，配合params用来传递参数

{
  path: "/",
  component: Layout,
  children: [
    { path: "/first/:name/:hobby", name: "ff", component: first },
    
    { path: "/second", name: "ss", component: second },
  ],
},

first模块的跳转：

goSecond() {
  this.$router.push("/second");  基础的跳转
  this.$router.push("/second?id=123"); 将id的值传递过去（具体可以做页面的登出，登入重入之前的页面）
  this.$router.push({ path: "/second", query: { id: 123 } }); 编程式传参，用的query，会在后拼接
  /* /second?id=123 */
  this.$router.push({ name: "ss", query: { id: 123, name: "jack" } });
},

second的跳转：

goFirst() {
  this.$router.push("/first");  基础的跳转
  this.$router.push("/first?id=222");
  this.$router.push({ path: "/first/rose", query: { id: 222 } });
  this.$router.push({
    name: "ff",
    query: { id: 222, age: 18 },
    params: { name: "tom", hobby: "游泳" },
    /* /first/tom/游泳?id=222&age=18 */
  });
},

路由传参归纳

一、路由传参的介绍：

二、具体的实例demo如下：