构建vue-router知识体系(三)动态路由基本匹配、简易的 router 实现

很多时候我们需要将给定匹配模式的路由映射到同一个组件： 例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但是用户的 ID 是不同的； 在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数；

// 映射表
{path:'/user/:id',component:()=>import('../pages/User.vue')
} 

router-link 跳转

<router-link to="/user/123"></router-link> 

获取动态路由的值

User 中如何获取到对应的值呢 在 template 中，直接通过 $route.params 获取值；

• 在 created 中，通过 this.$route.params 获取值；
• 在 setup 中，我们要使用 vue-router 库给我们提供的一个 hook useRoute；* 该 Hook 会返回一个 Route 对象，对象中保存着当前路由相关的值；

<template><div><h2>用户界面 {
  {$route.params.id}}</h2></div>
</template> 

export default {
created() {console.log(this.$route.params.id)
},
setup() {const route = useRoute()console.log(route)console.log(route.params.id)
} 

匹配多个参数

// 映射表
{path:'/user/:id/:info',component:()=>import('../pages/User.vue')
}

this.$route.params => {id:'xxx',info:'yyy'} 

NotFound

对于哪些没有匹配到的路由，我们通常会匹配到固定的某个页面 比如 NotFound 的错误页面中，这个时候我们可编写一个动态路由用于匹配所有的页面；

// 映射表
{path:'/:pathMatch(.*)',component:()=>import('../pages/User.vue')
} 

获取到传入的参数

$route.params.pathMatch

匹配规则加*

Not Found: [ "user"， "hahah", "123"] => path:'/:pathMatch（.*