query 与 params 使用

这个是路由: 

{
    path:'/city/:city',
    name:'City',
    component:City
  }
 
下面使用query和params分别传参
query:
  <router-link  :to="{name:'City',query:{city:cityName}}"  >
  能使用可是,浏览器发出警告[vue-router] missing param for named route "City": Expected "city" to be defined
    意思;[Vue router]缺少命名路由“city”的参数:应定义“city”
  原因:query访问最好使用 路径访问 即 <router-link  :to="{ path:'/city/:city',query:{city:cityName}}"  >
  接受数据:
     this.$route.query.city
  浏览器路径表现: /city/:city?city=广州
params:
  <router-link  :to="{path:'/city/:city',params:{city:cityName}}"  >
   此时,浏览器没有报错或警告,可是参数却没有传过来  浏览器表现  /city/:city
  所以要使用name代替路径 <router-link :to="{ name:'City',query:{city:cityName}}"  >
  接受数据:
     this.$route.params.city
  浏览器路径表现: /city/广州
总结: query 使用路径引入路由  params 使用name来引入路由
 
 
 
 
  

猜你喜欢

转载自www.cnblogs.com/j190512/p/11566790.html
今日推荐