vue-router-动态路由的使用

vue-router-动态路由的使用

动态路由

在某些情况下，一个页面中的path路径可能是不确定的，比如我们进入用户界面时，希望是如下路径：
/ user /aaa 或 / user /bbb
除了有前面的/user之外，后面还跟上了用户的ID
这种path和component的匹配关系，我们称之为动态路由（也就是路由传递数据的一种方式）
配置路由映射关系之前要先将组件导入

index.js文件中配置的路由：

{
    path:'/user/:userId',
    component:User
  }

user.vue组件中的内容：

<template>
  <div>
    <h2>我是用户界面</h2>
    <p>我是用户相关信息</p>
    <h2>{{userId}}</h2>
    <h3>{{$route.params.userId}}</h3>
  </div>
</template>

<script>
  export default {
    name: "User",
    computed:{
      userId(){
        //$route哪一个路由处于活跃状态拿到哪个
        return this.$route.params.userId
      }
    }
  }
</script>

<style scoped>

</style>