动态Vue-router(路由)

一、场景

在一些情况下，一个页面的path路径可能是不确定的，比如我们进入到用户界面时，希望是如下的路径：
-/user/aaa或者user/bbb。

• 除了前面的/user之外，后面还要跟上用户的ID。
• 这种path和component的匹配关系，我们称之为动态路由（也是路由传递数据的一种方式）。

二、使用

• 1、首先我们需要创建一个user.vue的组件。
• 2、配置router/index.js路由映射关系。
  3A02A378F74A5E92315B5B0475124EA1.jpg
  这里的path:'/user/:userId'中的userId参数非常重要，在后面的路由传递数据的时候有用到。

3、在app.vue中的使用

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-link :to="'/user/' + userId">用户</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      userId:'zhangsan'
    }
  },
}
</script>
<style>
.router-link-active{
  color: #FF0000;
}
</style>

4、user.vue组件中获取到userId，这里的userId对应的就是路由映射中的参数

<template>
  <div>
    <p>这里是用户的相关信息</p>
    <h2>我是用户界面</h2>
    //1、可以通过计算属性获取
    <!-- <p>{{userId}}</p> -->
    //2、也可以通过route直接获取
    <p>{{$route.params.userId}}</p>
  </div>
</template>
<script>
  export default{
    computed:{
      userId(){
        return this.$route.params.userId//这里获取到的是当前活跃的路由
      }
    }
  }
</script>
<style>
</style>