VUE路由传参的实用方式

  • VUE路由传参的实用方式已关闭评论
  • 167 次浏览
  • A+
所属分类:Web前端
摘要

本文讲解了VUE项目中路由之间的传值方式,涉及到的方法都是开发时常用的,希望对大家有多帮助。

本文讲解了VUE项目中路由之间的传值方式,涉及到的方法都是开发时常用的,希望对大家有多帮助。

1. 方式一:使用router-link标签 

1.1 params 传参

  • 首先定义好路由
    const routes = [     { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,     { path :  ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) }  ]

  • 在需要跳转的home组件中使用 router-link 标签
    <router-link :to=”{ name : ’about’ , params : { id : 1} }”>跳转</router-link>

  • 在跳转到的about组件中拿到传过来的值
    this.$route.params.id

小结:params传参类似post,路由配置可以为 path : '/about/ : id’  path : '/about : id’

注意:如果不配置path的路由地址 :id ,那么第一次发起请求时可以拿到传过来的值,但是刷新之后id会消失;配置了path后刷新页面id会保留。

1.2 query传参

  • 首先定义好路由
    const routes = [     { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,     { path :  ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) }  ]

  • 在需要跳转的home组件中使用 router-link 标签
    <router-link :to=”{ name : ’about’ , query: { id : 1} }”>跳转</router-link>

  • 在跳转到的about组件中拿到传过来的值
    this.$route.query.id

小结:query传参类似于get,在url末尾会显示传过来的参数,路由地址可不配置。

注意:如果是html取参,用$route.query.id;如果是script取参,用this.$route.query.id。

总结:如果使用params传参,要在path中配置好路由地址,不然页面刷新后传过来的参数会丢失;如果使用query传参,则无需再path中配置路由地址,页面跳转后刷新也不会丢失参数。

 

 

2. 方式二:使用button按钮和点击时间@click

2.1 params 传参

  • 首先定义好路由
    const routes = [     { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,     { path :  ‘/about/:id’ , name : ’about’ , component: () => import(‘/../views/about.vue’) }  ]

  • 在需要跳转的home组件中添加一个button按钮,并增加点击事件

    <button @click=”change”>跳转</button>

  • 在change方法中使用this.$router.push进行页面跳转

    change(){     this.$router.push({         name : “about” ,          params : {id : 1}     }) }        

  • 在about组件中拿到传过来的值

    this.$route.params.id 

小结:和使用router-link标签类似,使用params就类似于post方法,需要配置好路由地址:id,才不会在刷新页面后丢失数据。

2.2 query传参

 

  • 首先定义好路由
    const routes = [     { path :  ‘/home’ , component : () => import(‘/../views/home.vue’) } ,     { path :  ‘/about’ , name : ’about’ , component: () => import(‘/../views/about.vue’) }  ]

  • 在需要跳转的home组件中添加一个button按钮,并增加点击事件

    <button @click=”change”>跳转</button>

  • 在change方法中使用this.$router.push进行页面跳转

    change(){     this.$router.push({         name : “about” ,          query: {id : 1}     }) }

    或者:

    change(){     this.$router.push({         path: “/about” ,          query: {id : 1}     }) }

  • 在about组件中拿到传过来的值

    this.$route.query.id

小结:和使用router-link标签类似,使用query就类似于get方法,不需要配置好路由地址:id,刷新页面后数据也不会丢失。

 

总结:如果使用params传参,要在path中配置好路由地址,不然页面刷新后传过来的参数会丢失;如果使用query传参,则无需再path中配置路由地址,页面跳转后刷新也不会丢失参数。