vue 路由传参方式总结

vue常用的路由间传参

1.使用$route
2.使用 props将组件与路由解耦

一、使用$route

此方法会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。

路由 index.js

new Router({
  routes: [
    {
      path: '/content/:id',
      name: 'content',
      component: content,
    }
  ]
})

参数传递方

export default {
  created() {
    //方式一：
    //this.$router.push('/content/'+this.id+'?from='+this.from)

    //方式二：
    this.$router.push({
      name: "content",//注意这里如果用到params必须用name,若只有path,会报错
      params: {
        id: this.id
      },
      query: {
        from: this.from
      }
    });
  }
}

参数接收方：路由为/content/123?from=xxxx 此处的id值为123,from值为xxxx

export default {
  created() {
    console.log('这是通过路由params传递来的ID：' + this.$route.params.id);//123
    console.log('这是通过路由query传递来的from：' + this.$route.query.from);//xxxx
  }
}

注意：若路由需要通过params传递参数，必须指定路由的名称name，若只有路径path，会报错；

二、使用 props

将组件与路由解耦，这样便可以在任何地方使用该组件，使得该组件更易于重用和测试。 props传参模式可以分为以下几种：

1.布尔模式
2.对象模式
3.函数模式

1.布尔值模式 true或 false

路由 index.js

new Router({
  routes: [
    {
      path: '/content/:id',
      component: content,
      props:true
    }
  ]
})

参数传递方

<router-link :to="'/content/'+id"> 查看内容 </router-link>

参数接收方：路由为/content/123 此处的id值为123

export default {
  props: ['id'],
  created () {
    console.log('这是通过路由props传递来的ID：'+this.id)//123
  }
}

2.对象模式

此方式只能传递固定值参数，不能传递变量

路由 index.js

new Router({
  routes: [
    {
      path: '/content',
      component: content,
      props:{id:1}//此处的id为固定数据
    }
  ]
})

参数传递方

<router-link :to="/content"> 查看内容 </router-link>

参数接收方：路由为/content 参数不在URL中显示

export default {
  props: ['id'],
  created () {
    console.log('这是通过路由props对象模式传递来的ID：'+this.id) //1
  }
}

3.函数模式

案例1：

路由 index.js

export default new Router({
  routes: [
    {
      path: '/content/:id', //参数id在URL中显示
      component: content,
      props: (route) => ({
        id: route.params.id, //传递参数id,此处的id和path中的id相同
        from: route.query.from,//传递参数from，query参数会在URL中显示
      })
    }
  ]
})

参数传递方

<!-- 方式一  -->
<router-link :to="{
    path: '/content/'+id,
    query: {
      from: fromData
    }
}"> 查看内容 </router-link>

<!-- 方式二  -->
<router-link :to="'/content/'+id+'?from:'+fromData"> 查看内容 </router-link>

参数接收方：路由为 /content/123?from=xxxx 此处的id值为123，from值为xxxx

export default {
  props: ['id','from'],
  created () {
    console.log('这是通过路由props函数模式传递来的ID：'+this.id) //123
    console.log('这是通过路由props函数模式传递来的from：'+this.from) //xxxx
  }
}

案例2：

路由 index.js

export default new Router({
  routes: [
    {
      name: 'content',
      path: '/content', //参数id不在URL中显示
      component: content,
      props: (route) => ({
        id: route.params.id, //传递参数id,
        from: route.query.from,//传递参数from，query参数会在URL中显示
      })
    }
  ]
})

参数传递方

<router-link :to="{
    name: 'content',
    params: {
       id: id
    },
    query: {
      from: item.fromData
    }
}">查看内容</router-link>

参数接收方：路由为 /content?from=xxxx 此方式在刷新页面时将获取不到id

export default {
  props: ['id','from'],
  created () {
    console.log('这是通过路由props函数模式传递来的ID：'+this.id) //123
    console.log('这是通过路由props函数模式传递来的from：'+this.from) //xxxx
  }
}

注意：若传递参数要满足在URL路径中不显示：

1. 可以通过params方式传递参数，但是此参数在刷新页面后将会获取不到；
2. 可以通过props对象模式方式传递参数，并且此参数在刷新页面后仍然可以获取到

我的个人博客有空来坐坐

https://www.wangyanan.online