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来引入路由

  

原文地址:https://www.cnblogs.com/j190512/p/11566790.html

时间: 2024-10-10 03:37:35

query 与 params 使用的相关文章

vue-router传参的坑(query和params)

1.query方式传参和接收参数 传参: this.$router.push({ path:'/xxx' query:{ id:id } }) 接收参数: this.$route.query.id 注意:传参是this.$router,接收参数是this.$route,这里千万要看清了!!! this.$router 和this.$route有何区别?在控制台打印两者可以很明显的看出两者的一些区别: 1.$router为VueRouter实例,想要导航到不同URL,则使用$router.push

vue-router query和params传参(接收参数)的区别

版权声明: https://blog.csdn.net/youth_lx/article/details/79780938 <div class="markdown_views"> <!-- flowchart 箭头图标 勿删 --> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap=&q

使用路由传参时,query与params的区别!

query 1:参数会在地址栏显示 2:参数不需要在路由的path后接:args1/:args2 3:获取参数用this.$route.query.args1 params 1:参数需要在路由的path后接:args1/:args2 2:获取参数用this.$route.params.args1 原文地址:https://www.cnblogs.com/erfsfj-dbc/p/10084379.html

vue-router的query和params的区别

vue-router的query和params的区别 首先简单来说明一下$router和$route的区别 $router为VueRouter实例,想要导航到不同url,则使用$router.push方法 $route为当前router跳转对象,里面可以获取name.path.query.params等 params方式传参和接收参数 this.$router.push({ name:'xxx' params:{ id:id } }) 接收参数: this.$route.params.id qu

路由传参 query 和 params

vue路由传参分为两种情况: 一.query和params传参的区别: 1.query传参显示参数,params传参不显示参数,params相对于query来说较安全一点. 2.取值方法也有不同:query取值:this.$route.query.XXX || this.$route.params.xxx 3.query传值页面刷新数据还在,而params传值页面数据消失. 二.各自写法: query 组件写法(help.vue): 方式一: 方式二: 接受写法(home.vue) 页面渲染(h

vue-router路由传参之query和params

首先简单来说明一下$router和$route的区别 //$router : 是路由操作对象,只写对象 //$route : 路由信息对象,只读对象 //操作 路由跳转 this.$router.push({ name:'hello', params:{ name:'word', age:'11' } }) //读取 路由参数接收 this.name = this.$route.params.name; this.age = this.$route.params.age; 1·query传递参数

Vue 页面传参方式 Query 和 Params

1. query 与 params 传参 query ????需要和配合 path 属性使用,携带参数会拼接在请求路径后,效果同 Get 请求方式 http://localhost:8033/Permission/Role/Form?productCode=crm-operate&roleId=1&roleName=admin&roleType=-1&roleDesc=%E7%AE%A1%E7%90%86%E5%91%98 params ????需要配合 name 属性使用

vue路由传参query和params的区别

1.用法 A.query要用path来引入(用name来引入也可以),接收参数都是this.$route.query.name. B.params要用name来引入,接收参数都是this.$route.params.name. 2.效果 A.query类似于ajax中get传参,即在浏览器地址栏中显示参数. B.params则类似于post,即在浏览器地址栏中不显示参数. 3.个人建议 在路由传参上建议使用params,以隐藏参数,做好安全保密.

路由参数 query和params

1. path:'www.baidu.com' query  { id:122 } 对应地址:http:'www.baidu.coom?id=122'   类似get方式 2.name:'baidu' params:{ id:122 } 对应地址:http:'www.baidu.coom/122' 类似post方式 原文地址:https://www.cnblogs.com/bydzhangxiaowei/p/9783545.html