vue路由route的restful风格传参

前面讲了vue的ref传值和bus总线传值CSDN，父组件给子组件传值CSDN，子组件给父组件传值CSDN四种传值方式，以及路由的两种跳转方式，本篇文章再介绍一下vue的路由restful风格(表述性状态转移)传递参数值的方式。

1、准备工作：参考上一篇文章CSDN配置动态路由。

2、在映射表中的path后加上/：参数名，这里写了参数名id和name。

"path":"/list/:id/:name"

 3、在路由标签的to属性中加上/参数值。

列表

4、在对呀组件状态值中添加id和name。

data(){
            return {
                id: "",
                name:'',
            }
        },

 5、在钩子函数created中使用vue$route属性来把传递过来的参数值赋给状态值。

created() {
            // console.log(this.$route);
            this.id = this.$route.params.id;
            this.name = this.$route.params.name;
        }

 6、在组件模板中引用定义的状态值。

template:`
列表-{{id}}-{{name}}
`,

效果如下：

 restful风格传参比较简便，参数可以直接 /参数名 传递，但也有一个不好的地方就是要在映射表路径中去配置，比较死板，如果参数较多是非常繁琐的，要注意参数名和参数值的对应关系。