Vue router中携带参数与获取参数

Vue router中携带参数与获取参数

  1. 携带参数

    1. query方式,就是?+&结构,例如/login?id=1

      <router-link :to="{ name:‘login‘,query:{id:1} }">登录</router-link>
      this.$router.push({
               path: ‘/login‘,
               query:{
                     id:id,
                }
      })
      
    2. Params方式,也就是类似于restful风格,例如/register/San

      <router-link :to="{ name:‘register‘,params:{‘name‘:‘San‘} }">注册</router-link>
      this.$router.push({
               name: ‘monitor‘,
               params:{
                     id:id,
                }
      })
      

      这种方式(restful风格)配置的路由,要在配置路由的时候格外注意一点

      var router = new VueRouter({
          routes:[
              {name:‘login‘,path:‘/login‘,component:Login},
              {name:‘register‘,path:‘/register‘,component:Register}
          ]
      })
      
  2. 获取参数

    1. query方式

      this.$route.query.id
      
    2. params(restful)

      this.$route.params.name
      

Vue router中携带参数与获取参数

上一篇:JavaBean实体类


下一篇:1336:【例3-1】找树根和孩子