Vue.js进阶系列(32)--动态路由

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

image.png

1.产生背景

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

image.png

  当用户“zhangsan”登陆系统，进入到系统的首页时，就会在首页的URL后面显示“zhangsan”

2.使用步骤

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

image.png

  本例子中，在uesr页面的跳转路径path添加了 uesrID 的字段，希望当某个用户登陆系统，进入到 uesr 页面时在该页面的URL上显示用户的ID信息。

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

用户

image.png

  为 user页面的URL地址后追加的用户名为“zahngsan”的用户。但是正常的开发过程中，用户千千万，我怎知你是谁呢，所以一般采用动态添加的方式。
2.2 动态添加
所谓的动态添加就是字段的值用变量来替代，比如：
首先得在data中声明变量

//在App.vue文件

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

用户

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

image.png

3. route

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

image.png

在路由中提供了另外一种方法： $route。具体用法如下：
① 首先，通过 route 获取 URL后面的字段值：

//在App.vue文件

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

//在App.vue文件

image.png

4. router 和route 的区别

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

① 字面差别

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

② 本质

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

image.png

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

image.png