Vue路由配置

1.1， 配置动态路由

const routes = [
  {
    path: '/detail/:id',
    name: 'MovieDetailForm',
    component: MovieDetailForm
  }
]

1.2， 在跳转路径设置参数，不用传参数名

<router-link tag="li" :to="'/detail/'+index">
　　{{item.name}}
</router-link>

1.2.1， 方法跳转

tabGo(event, movieId){
　　console.log('---method tabGo---'+event+'-------'+ movieId);
　　this.$router.push(
　　　　{
　　　　　　path: '/detail/' + movieId
　　　　}
　　)
},

1.3 ，在对应的页面获取动态路由参数 MovieDetailForm.vue

this.$route.params

2.1，使用path来匹配路由，然后通过query来传递参数  Get传值

配置路由

const routes = [
  {
    path: '/detail',
    name: 'MovieDetailForm',
    component: MovieDetailForm
  }
]

跳转路由

tabGo(event, movieId){
　　console.log('---method tabGo---'+event+'-------'+ movieId);
　　this.$router.push(
　　　　{
　　　　　　path: '/detail', 
　　　　　　query: {movie_id: movieId}
　　　　}
　　)
},

对应的页面获取传值

mounted(){
　　console.log('mounted is complete');
　　console.log(this.$route.query.movie_id);
},

3，使用name来确定匹配的路由，通过params来传递参数

3.1  配置路由

const routes = [
  {
    path: '/detail',
    name: 'MovieDetailForm',
    component: MovieDetailForm
  }
]

3.2  

tabGo(event, movieId){
　　console.log('---method tabGo---'+event+'-------'+ movieId);
　　this.$router.push(
　　　　{
　　　　　　name: 'MovieDetailForm', 
　　　　　　params: {movie_id: movieId}
　　　　}
　　)
},

3.3  跳转到的页面接收参数

this.$route.params 获取动态路由的

注意：
params 和 query 传参的区别：
1、params传参时 参数不会出现在url的路径上面， 但是刷新页面时param里面的数据会消失
2、query传参时 参数出现在url的路径上面， 刷新页面时query里面的数据不变

注意path不能与params一起使用，需要通过path来匹配路由的时候，使用query来传参。
接收参数都是类似的。
query要用path来引入，接收参数是 this.route.query.name
params要用name来引入，this.route.params.name。
query更加类似于我们ajax中get传参，params则类似于post，前者在浏览器地址栏中显示参数，后者则不显示

可以跳转页面，this.$router.push()方法只有一个参数的时候，代表跳转地址，还可以增加一个参数传值。

写法：
this.$router.push({name: 'MovieDetailForm', params: {'id': data.id, 'title': data.title}});
接收参数：
this.$route.params.title