vue路由传参数--手摸手教学

vue中路由跳转及传参（以下仅仅是根据我个人的学习与理解编辑）

　　 一：跳转有2种

　　　　1.方式一：

　　　　　　router-link to 的方式

　　　　2.方式二：

　　　　　　this.$router.push 的方式

　　 二：传参有2种

　　　　1.方式一：

　　　　　　params 配合命名路由 name 的方式    ---->参数不会显示在地址栏

　　　　　　params 配合path不可以，params会丢失的

　　　　2.方式二：

　　　　　　query 配合 path  的方式   ----->你传的参数就会直接显示在浏览器地址栏，就算刷新数据也是会在的

　　　　　　query  配合name的方式

 　　三：详细讲解如下：

　　　　1.新建2个文件，模拟路由跳转

　　　　　　如图：1.1 params的方式传参，对应我的文件是 one_params_name.vue

　　　　　　　　　1.2 query的方式传参， 对应我的文件是 two_query_path.vue

 

 

 2. 配置一下这2个文件对应的路由，用的是router-link的方式跳转

　　这里代码仅展示了跳转，没有传参数，但是方式也是和this.router.push的传参方式是一样的

 

 

 

 

 

 实现的效果就是:点击OneParamsName   跳转到  one_params_name.vue  页面

　　　　　　　  点击OneParamsName   跳转到  one_params_name.vue  页面

3.触发点击事件，分析参数

　　3.1没点击之前：如图

 

 

 　　3.2在OneParamsName页面触发点击事件

 

 

　　上图说明：点击事件触发，携带的参数就会带到 TwoQueryPath这个页面，如有需要，就可以通过this.$route.params.id取出来用

 

 

 

 

 

上图说明：携带的参数会带到OneParamsName.vue页面，通过this.$route.query.id 取出来用