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:`

              <div>我是登录页面

                  <span>这是我获取到的参数： {{ msg }}</span>

              </div>

           `,

           data(){

              return {

                  msg:''

              }

           },

           created(){

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

           }

       }

       var Restiger={

           template:`

              <div>我是注册页面

                  <span>这是我获取到的路由参数：{{ restigerfoo }}</span>

              </div>

           `,

     

            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:`

              <div>

                <router-link :to="{name:'login',query:{id:'123'}}">去登录</router-link>

                |

                <router-link :to="{name:'restiger',params:{foo:'bar'}}">去注册</router-link>

                  <button @click='jslink'>js跳转去登录</button>

                  <router-view  :key="$route.fullPath"></router-view>

              </div>

           `,

           data(){

              return {}

           },

           methods:{

              //js跳转传参是一样的

              jslink(){

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

              }

           }

       })

代码2

var Login={

           template:`

              <div>我是登录页面

                  <span>这是我获取到的参数： {{ msg }}</span>

              </div>

           `,

           data(){

              return {

                  msg:''

              }

           },

           created(){

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

           }

       }

       var Restiger={

           template:`

              <div>我是注册页面

                  <span>这是我获取到的路由参数：{{ foo }}</span>

              </div>

           `,

           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:`

              <div>

                  <router-link :to="{name:'login',query:{id:'123'}}">去登录</router-link>

                  |

                  <router-link :to="{name:'restiger',params:{foo:'bar'}}">去注册</router-link>

                  <button @click='jslink'>js跳转去登录</button>

                  <router-view :key="$route.fullPath"></router-view>

              </div>

           `,

           data(){

              return {}

           },

           methods:{

              //js跳转传参是一样的

              jslink(){

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

              }

           }

       })

 

运行效果