Vue系列vue-router的动态路由使用（二）

前言

首先我们来看看官方文档上是怎么解释动态路由的？走你

你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：

一、什么场景下使用动态路由呢？

比如在写用户详情页面的时候，页面结构都一样，只是用户id的不同，所以这个时候就可以用动态路由动态。

二、第一个模式（/user/:username ）实例代码

1、创建User.vue

我们使用/user/:username 这个模式进行编码

2、到router文件夹下 》index.js文件 》输入匹配规则

3、在App.vue中触发动态路由跳转

此时我们先模拟该用户id为1，我们查看路由路径参数，以及页面渲染是否真确。

ok，没问题，我们渲染成功了，我们再想想，比如当前携带的参数id，我们想在页面进行展示，怎么做呢？

上面有一句官方说明的话，在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。这样我们是不是可以通过它取到呢？显然是必须的。

在User.vue中直接获取加入：

{{$route.params.userId}}

刷新查看页面效果：

这个时候大家会想，后端穿过来的用户id不一定是1啊，你这样写死了，好吗？当然不是，真实开发过程中id肯定是动态获取的。

三、v-bind 属性动态参数绑定

修改App.vue下面的用户路由为动态属性绑定

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

三、第二个实列（/user/:username/post/:post_id）实例代码

第一个模式是不是很简单啊，表格中的第二个模式也就更简单了。我们修改一波代码，这里就不详细说明了。

1、index.js

2、User.vue

3、App.vue

4、页面效果

注意：当然{{$route.params.userId}}这种方式在页面是直接获取，以上我们都采用这种方式，我们也可以间接获取变量值，下面我们来采取另外一种方式，动态渲染接受变量值。

修改User.vue页面：

<h4>间接获取到的ID是：{{userId}}</h4>
<h4>间接获取到的Name是：{{userName}}</h4>

使用computed这个属性动态赋值：

<script>
    export default {
        name: "User",
        // computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；
        // computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化
        // 举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择
        computed: {
            userId() {
                return this.$route.params.userId
            },
            userName() {
                return this.$route.params.userName
            }
        }
    }
</script>

完结…后续文章静待更新