vue路由传参

原生JS 传参

    本地跳转页面传参
    location.href = 'xxxxxxx?filmId=filmId';
    获取传来的参数
    var str = location.href;
    截取参数 = 号后面的所有
    var index = str.indexOf('=') + 1;
    重新声明一个变量   
    var filmId = str.slice(index);
     把 参数放到需要数据的后面
    var url = 'http://132.232.87.95:3000/api/film/getDetail?filmId=' + index

Vue 传参

使用 <router-link>传参数 第一种方法

                     需要参数的页面  item里面的参数
   <router-link :to="`./filmDetail/${item.filmId}`"></router-link>
              在router页面  路由接收参数
     {         
   path: 'filmDetail/:filmId',    filmId传递过来的参数
   component: () => import('@/views/film/children/filmDetail'),
    }
  需要的页面 使用路由传来的filmId
      let res = await this.$http.get(url, {
        filmId: this.$route.params.filmId  使用路由传来的filmId
      });

this.$route.params.filmId  
这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是$router.params  这很重要~~~

第二种方法 点击事件传参

<li v-for="article in articles" @click="getDescribe(article.id)">

  getDescribe(id) {
 直接调用this.$router.push 实现携带参数的跳转
        this.$router.push({
          path: `/describe/${id}`,   需要参数页面的路由 后面是参数
        })
方案一，需要对应路由配置如下：
   {
     path: '/describe/:id',
   }
需要在path中添加/:id来对应 this.$router.push 中path携带的参数。
this.$route.params.id  同第一种方法获取并且使用参数一样

第三种方法 点击事件传参

父组件中：通过路由属性中的name来确定匹配的路由，通过params来传递参数。

<li v-for="article in articles" @click="getDescribe(article.id)">
  getDescribe(id) {
       this.$router.push({
          name: 'Describe',   路由名称
          params: {
            id: id
          } 
      })
    }
       
对应路由配置: 注意这里不能使用:/id来传递参数了，因为父组件中，已经使用params来携带参数了。
   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
子组件中: 这样来获取参数 this.$route.params.id

第四传参方法 点击事件传参方法

父组件：使用path来匹配路由，然后通过query来传递参数
这种情况下 query传递的参数会显示在url后面?id=？
<li v-for="article in articles" @click="getDescribe(article.id)">
  getDescribe(id) {
    this.$router.push({
          path: '/describe',  路由名称
          query: {   参数
            id: id
          }
        })
      }
对应路由配置：
   {
     path: '/describe',
     name: 'Describe',
     component: Describe
   }
对应子组件: 这样来获取参数
this.$route.query.id
这里要特别注意 在子组件中 获取参数的时候是$route.params 而不是
$router 这很重要~~~