vue中通过props 获取路由传参

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

示例如下：

1.在路由中配置如下动态路由：
 {
    path:'/article/:articleId',
    name:'article',
    component:()=>import('../views/home/components/article-datail.vue'),
    //直接可以通过props进行接受
    props: true 
  },

2.新建article-datail.vue组件

<template>
  <div>文章ID为{{articleId}}</div>
</template>

<script>
export default {
props:{
    articleId:{
        type:String,
        required:true,
    }
},
created(){
    console.log("进行了啊");
}
}
</script>

<style>

</style>

结果如下：