Vue------动态路由匹配

带参数的动态路由匹配

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

<template>
   <h2>用户:</h2>
</template>

<script>
export default {
    name: 'User',
    data() {
        return {
            
        };
    },
};
</script>

<style lang="css" scoped>
    
</style>

配置路由：

{ path: '/users/:id', component: ()=>import('../views/User') },

获取动态路由的值:
路径参数用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。因此，我们可以通过更新 User 的模板来呈现当前的用户 ID：

<template>
   <h2>用户:{{$route.params.id}}</h2>
</template>

● 在template中，直接通过$route.params获取值；

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

使用 $route 会与路由紧密耦合，这限制了组件的灵活性，因为它只能用于特定的 URL。虽然这不一定是件坏事，但我们可以通过 props
配置来解除这种行为：我们可以将下面的代码:

替换成:

当 props 设置为 true 时，route.params 将被设置为组件的 props