Vue-router05-*动态路由 参数传递的两种方法

要实现的效果：在App2.vue中点击电影1电影2电影3 都是可以跳转到Movie.vue中，并传递一定参数  在Movie组件中，希望根据id值，展示对应电影的详情信息

一、第一种方法（$route.params.id）

现在要实现

在movie组件中this.$route.params.id 可得出当前路由中的id，小技巧this可加可不加都能得到id

movie组件中

showthis中得到的this下的参数对象

 

其中this.$route是路由的参数对象

二、第二种方法-props传参 

props方法的使用条件，当该路由有动态参数项（：id）的时候 才加入props:true属性来开启动态参数的传递

在index.js文件中的movie路由中加入props:true 意思是开启props属性的传参 如果少了这段话就无法传参

下图中有用红色箭头标注出props动态参数传递的三个步骤：

1.先在组件中的

两种传参的区别:第一种传参方法稍微长一点得$route.params.id 而第二种方法得先在movie.vue中加入props属性任何在index.js中让props:true 最后在movie.vue中要获取id直接{{id}} 不需要$route.params.id