Vue——路由：动态路由

动态路由相关总结

动态路由是什么？
动态路由应该是指在配置路由中，路由路径中使用动态段， 比如用冒号 “ ： " 括起来的部分，比如/user/:id。这样，当用户访问/user/123的时候，123会被当作一个参数传递到对应的组件中。同时动态路由中传的参数也是跳转路径一部分，只是的应为动态可换所以称为动态路由

params和query的区别？
params应该是通过路径传递的参数，比如/user/123中的123，而query则是通过问号传递的参数，比如?name=John。这可能会影响参数在组件中的获取参数方式。
params是在 this . $ route.params中，而query则是在this. $route.query中。

一、代码结构总览

你的代码分为三个关键部分：

1. 路由配置（src / router.js） ：定义动态路径 /user/:id。
2. 导航链接（pages /main文件/index.vue） ：通过 < router-link> 跳转到不同用户的路径（如 /user/1、/user/2）。
3. 用户组件（pages/user文件/index.vue） ：接收并渲染动态参数 id。

二、运行流程详解

1. 导航链接（main/index.vue）

<div class="menu">
  <router-link to="/user/1">张三</router-link>  //
  <router-link to="/user/2">李四</router-link>
</div>

当你点击 “ 张三 ” 这个链接时，网址栏，会在网址栏生成一个URL(URL是网址，这个网址是点击张三后所通向的页面)，

生成链接：
< router-link> 会渲染为 < a> 标签，点击后修改浏览器 URL 为 /user/1 或 /user/2。

触发路由匹配：
Vue Router 监听到 URL 变化后，会根据网址栏中的路径 /user/1 或 /user/2 匹配到 router.js 中定义的路由规则 /user/:id。

2. 路由配置（router.js）

{
  path: "/user/:id",  //router.js中生成的动态路径参数 :id
  name: "user",
  component: () => import("./pages/user") // 加载用户组件
}

路由配置中动态路径参数 :id ：
:id 是一个占位符，表示此段路径是动态的，可以匹配任意值（如 /user/1、/user/abc）。

路由配置中，路由匹配规则：
当用户访问 /user/1 或 /user/2 时，Vue Router 会检查 router.js 中的路由配置，发现 /user/:id 可以匹配这些路径（网址栏生成的URL: 如 …/user/1），并提取 1 或 2 作为参数 id,并在router.js路由配置中，由/user/:id变为/user/1或/user/2

{
  path: "/user/1",  //router.js中生成的动态路径参数 :id
  name: "user",
  component: () => import("./pages/user") // 加载用户组件
}

path: “/user/:id”（URL路径），绑定的组件是user.vue./pages/user"是user.vue组件的路径）

3. 用户组件（user/index.vue）

<template>
  <div>用户的ID：{{ $route.params.id }}</div>
</template>

<script>
export default {
  name: "user",
  created() {
    console.log("用户的ID：" + this.$route.params.id);
  }
};
</script>

获取动态参数：
通过 $route.params.id 可以访问路由配置中定义的动态参数 :id。
运行流程：
当用户点击链接时，网址栏生成URL（…/user/1） ，Vue Router将URL 与路由配置进行相关匹配，匹配到 /user/:id 时，将 id=1 传给给相关联的组件，组件用 $route.params.id，接收参数id。

用户组件被实例化，created 钩子中打印 用户的ID：1。
模板中渲染 用户的ID：1。
同理，点击李四时，网址栏生成URL路径： /user/2 ，在路由配置中匹配到 /user/:id ，将 id=2赋值给 $route.params.id。$route.params.id 变为 2。

====================================================================================================
当传多个参数时，并且参数类型不固定 类型，可以使用查询参数（query） 传递参数。，但这个参数不是不是跳转路由中的部分

当传俩个参数时：
点击 “张三” 这个链接，网址栏生成URL(…/user/1/张),URL 和 route.js(路由配置)，进行匹配。

<div class="menu">
  <router-link to="/user/1/张">张三</router-link>  
  <router-link to="/user/2">李四</router-link>
</div>

route.js(路由配置)

{
  path: "/user/:id",  //router.js中生成的动态路径参数 :id
  name: "user",
  component: () => import("./pages/user") // 加载用户组件
}

路由配置中并没有找到相匹配的的动态路径参数 " /:id/:name “，(path: “/user/:id/:name”)
所以< router-link to=”/user/1/张">张三< /router-link> 不会路由跳转成功

解决参数不固定问题：（查询参数（query） 传递参数）

如果参数不固定比 如“ /user/1 ” 或 “ /user/1/张三 ” ，这两个同时存在，而路由配置（route.js）里面配置了 /user/:id/:nickname，那么/user/1是匹配不到的，这样很不灵活，我们通常使用 “ ? ” 后面加参数的模式来解决，比如：/user?id=1，/user?id=1&nickname=张三，这样的来解决参数不固定的问题，

链接

<div class="menu">
  <router-link to="/user? id=1 & name=张三"">张三</router-link>  
  <router-link to="/user/2">李四</router-link>
</div>

route.js(路由配置，即就是将链接和组将进行关系绑定，和关系传参)

{
  path: "/user",  
  name: "user",
  component: () => import("./pages/user") // 加载用户组件
}

组件

<template>
  <div>用户的ID:{{$route.query.id}},用户的昵称：{{$route.query.nickname}}</div>
</template>

<script>
export default {
  name: "user",
  created() {
    console.log(this.$route.query.id,this.$route.query.nickname)
  }
};
</script>

< router-link to=“/user? id=1 & name=张三”>张三< /router-link >
不属于动态路由：路由配置路径 /user 是静态的，未使用动态参数（如 /user/:id），因此属于通过 query 传参。

动态路由参数是跳转路径的一部分，而查询参数位于问号后面，通常用于可选参数或过滤条件，不算是路径中的一部分。

route.js(路由配置）

{
  path: "/user",  
  name: "user",
  component: () => import("./pages/user") // 加载用户组件
}