Vue路由的传参与取参

概述

1. 查询参数

 

配置（传参）  :to="{name:'login',query:{id:loginid}}"

获取（取参）  this.$route.query.id

2.路由参数

 

配置（传参）

 :to="{name:'register',params:{id:registerid}  }"

配置路由的规则  { name:'detail',path:'/detail/:id'}

获取 this.$route.params.id

 

总结：

 

1.:to传参的属性里  params是和name配对的   query和name或path都可以

 

2.使用路由参数必须要配置路由规则里面配置好参数名，否则刷新页面参数会丢失

代码1

       var Login={

           template:`

              
我是登录页面

                  这是我获取到的参数： {{ msg }}

              

           `,

           data(){

              return {

                  msg:''

              }

           },

           created(){

              this.msg=this.$route.query.id

           }

       }

       var Restiger={

           template:`

              
我是注册页面

                  这是我获取到的路由参数：{{ restigerfoo }}

              

           `,

     

            data(){

               return {

                  restigerfoo:''

               }

            },

            created(){

               this.restigerfoo=this.$route.params.foo

            }

       }

       //安装路由插件

       Vue.use(VueRouter);

       //创建路由对象

       var router= new VueRouter({

           //配置路由对象

           routes:[

              {path:'/login',name:'login',component:Login},

            {path:'/restiger/:foo',name:'restiger',props:true, component:Restiger},

           ]

       })

       new Vue({

           el:'#app',

           router,

           template:`

              


                去登录

                |

                去注册

                  js跳转去登录

                  

              

           `,

           data(){

              return {}

           },

           methods:{

              //js跳转传参是一样的

              jslink(){

                  this.$router.push({name:'login',query:{id:'456'}})

              }

           }

       })

代码2

var Login={

           template:`

              
我是登录页面

                  这是我获取到的参数： {{ msg }}

              

           `,

           data(){

              return {

                  msg:''

              }

           },

           created(){

              this.msg=this.$route.query.id

           }

       }

       var Restiger={

           template:`

              
我是注册页面

                  这是我获取到的路由参数：{{ foo }}

              

           `,

           props:['foo']

       }

       //安装路由插件

       Vue.use(VueRouter);

       //创建路由对象

       var router= new VueRouter({

           //配置路由对象

           routes:[

              {path:'/login',name:'login',component:Login},

              {path:'/restiger/:foo',name:'restiger',props:true, component:Restiger},

           ]

       })

       new Vue({

           el:'#app',

           router,

           template:`

              


                  去登录

                  |

                  去注册

                  js跳转去登录

                  

              

           `,

           data(){

              return {}

           },

           methods:{

              //js跳转传参是一样的

              jslink(){

                  this.$router.push({name:'login',query:{id:'456'}})

              }

           }

       })

 

运行效果