老规矩，长话短说 。今天小编要给大家分享的是动态路由

image.png

1.产生背景

  为什么会有动态路由呢？因为在一般的项目中，都会涉及到用户登陆的操作，我们希望某某用户登陆某个网页的时候，能够在该网页的UURL地址上显示用户的登录名或者用户ID等的信息。
  动态路由就是根据不同的用户将在网页的URL中动态追加登录名或者ID等信息。
比如:

image.png

2.使用步骤

① 在 routes 加字段
如果想在URL后面追加字段，首先得将字段添加到跳转路径的后面。
比如：

image.png

② 在 router-link 添加字段的值
  光是在 routes 的 path 上添加字段是没有用的，因为没有具体的数值，而且如果path:是 '/user/:userID' 这种形式，就没有办法显示“user”这个页面的，因为根本没有这样的路径，所以我们需要在 router-link 的to属性添加字段的值，有两种方式：静态添加和动态添加
2.1 静态添加
所谓的静态添加就是字段的数值是写死的，比如：

<router-link to="/user/zhangsan" tag="button" replace>用户</router-link>

image.png

//在App.vue文件
<script>
export default {
  name: 'App',
  data (){
      return {
          userID:"李四"
      }
  }
}
</script>

然后通过 v-bind 指令使用变量 userID

<router-link :to=" '/user/' +userID"tag="button" replace>用户</router-link>

这里要注意的是常量和变量的拼接。
常量：要用引号包裹，因为用引号包裹后就是普普通通的字符串
变量：不需要引号包裹，和常量通过 + 拼接
其效果图如下：

image.png

3. route

现在小编有一个新的需求。希望拿到追加在URL后面的字段并且显示在页面中。
比如：

image.png

//在App.vue文件
<script>
export default {
  name: 'App',
  data (){
      return {
          userID:"李四"
      }
  },
computed:{
      userid(){
          return this.$route.params.userID
      }
  }
}
</script>

使用计算属性，将通过route 获取的userID传递到变量userid中。
② 然后在页面显示该值

//在App.vue文件
<template>
    <div>
        <router-link to="/home" tag="button" replace>首页</router-link>
        <router-link to="/about" tag="button" replace>关于</router-link>
        <router-link :to="'/user/'+userID"tag="button" replace>用户</router-link>
        <router-view></router-view>
        <h3>{{userid}}</h3>
    </div>  
</template>

image.png

4. router 和route 的区别

  昨天小编在用代码实现路由跳转的时候用过 router；今天在获取URL追加的字段的时候用过 route 。虽然只是相差了一个单词，但是意义完全不一样，具体的区别如下：

① 字面差别

  这个差别很明显了，router 比route 多了个 字母 r。不要笑噢，这个也是很严肃哒，细节决定成败，说的就是这个理儿

② 本质

router：本质是router对象
route：本质是router对象里的一个属性routes，routes下面有很多个route，而通过 $route 获取的路由是处于激活状态下的路由。具体关系见下图：

image.png

好啦，今天的小故事会到此结束啦~谢谢大家的捧场 ❀
❤记得给小编点赞唷❤

image.png