【Vue 自学笔记】 动态路由配置、路由参数获取

动态路由配置

官方文档给出了这么一个情景：

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。

也就是在某些情况在我们需要根据路由传来的参数去渲染页面，从而达到动态路由的目的。

官方给出的示例代码如下：

import User from './User.vue'

// 这些都会传递给 `createRouter`
const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', component: User },
]

可以看到，当我们需要动态给路由传参时，使用:参数名的方式为路由进行配置，在实际访问时传入相应参数。

路由参数获取

如下代码：

import router from "@/router/index.js";
console.log(router.currentRoute.value.params)

通过router.currentRoute.value.params来获取当前路由下的路径参数。

具体怎么用呢？
要拿到参数，必须在路由匹配的页面下去获取，如果你在与路由不匹配的页面去获取，是获取不到的！

实操

还是接着上一次的代码进行编写。
上一次是在App.vue配置了路由，根据 home的事件回调进行页面渲染。

首先调整一下上次的代码，使路由根据我们定义的路由名进行导航，不必每次都传入长长的路径。在views/home.vue下，更新一下change-view事件的返回类型为对象，包含 name 和 params两个属性，与我们设定路由名称是对应的，参数先给定一个 id，值为 1：

function fromSub(event){
  emits('change-view',{
    name:'detail',
    params: {
      id: 1,
    }
  })
}

---

在App.vue也更新一下修改路由的函数，改为接收我们从home页面事件传来的对象，进行路由更新：

<script setup>
import router from "@/router/index.js";
function onChangeView(event) {
  router.push(event)
}
</script>

<template>
  <router-view @change-view="onChangeView"></router-view>
</template>

<style scoped>

</style>

tip：router.push()支持传入对象，对象的格式必须包含 path或name，以及params，如果参数为空，可以为params设置一个空对象。可以参照上面home.vue回传的对象。

---

在route/index.js下更新路由配置，使 detail页面必须附带参数：

{
   path:'/detail/:id',
   name: 'detail',
   component: detail,
}

---

在views/detail.vue下获取路由的路径参数，打印到控制台：

<script setup>
import router from "@/router/index.js";
console.log(router.currentRoute.value.params)
</script>

<template>
  <div>这是详情页面</div>
</template>

<style scoped>
</style>

---

最终效果
首页：

点击图片触发事件，修改路由，来到detail页面：

路由参数设置成功，路由到的页面也能获取到路由参数，目标实现！