`
- 浏览:
609241 次
- 性别:
- 来自:
上海
-
vue router传递参数 params和query
需求:
list.vue页面
是这样子的,我想把itemId传给hotel.vue页面。
点击url会跳转到http://localhost:8080/#/hotel/1001
分为参数显示在url和参数隐藏
1、参数显示在url中
--------------------------------------------------------------------
list.vue 中
<template>
<div>
<h3>首页</h3>
<router-link :to="{path:'/hotel', query: {itemId:1001}}">
<button>显示</button>
</router-link>
<router-view></router-view>
</div>
</template>
url:http://localhost:8080/#/hotel?itemId=1001
hotel.vue 中
this.$route.query.itemId
F5强制刷新下hotel.vue页面,itemId参数依然存在
2、参数不显示在url中,如果在PC端将传递的值显示在url中,这样无形中就存在安全隐患,如果客户不小心修改了url那样就会出错,移动端就无所谓了,如何才能不显示在url中,同样很简单,但是需要给映射的路径起一个别名,通过name来取别名
--------------------------------------------------------------------
同样只需将上面的main.js中的定义路由改为如下样子,在子路由中通过name来给路径其一个game1的别名。
//定义路由
const routes = [
{ path: "/", redirect: "/home" },//重定向
{
path: "/home", component: home,
children: [
{ name: "game1", path: "/home/game/", component: game }
]
}
]
list.vue 中
router-link修改为:to="{ name:'game1', params: {itemId: 1001} }"
params中是要传递的参数,这样传递的参数就不会显示在url中。
<template>
<div>
<h3>首页</h3>
<router-link :to="{ name:'game1', params: {itemId: 1001} }">
<button>显示</button>
</router-link>
<router-view></router-view>
</div>
</template>
url:http://localhost:8080/#/hotel
hotel.vue 中
this.$route.params.itemId
可是F5强制刷新下hotel.vue页面,itemId参数就丢失了
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
本篇文章主要介绍了vue router使用query和params传参的使用和区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
1.引入方式不同 query要用path来引入 this.$router.push({ path: 'test', query: { type: 2, ...query在url中显示参数 http://localhost:8080/detail?type=0&detail=哈哈 params在url中不显示参数 ht
传参是前端经常需要用的一个操作,很多场景都会需要用到上个页面的参数,本文将会详细介绍vue router 是如何进行传参的,以及一些小细节问题。有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望...
1、vue 路由 如果传递 params 定义路由的时候是 /路由名称:id 获取的时候 this.$route.params.id 最后形如 /路由名称/路由参数 传参的时候 params:{ str1:str1, str2:str2 } 2、如果传递query ?id=str…...
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。...vue-router传参两种方式:params和query params、query是什么? params:/router1/:id ,/router1/1
在嵌套路由中我们经常会遇到父路由向子路由里面传递参数,传递参数有两种方法,通过 query 或者 params index.html <!-- router-view 路由出口, 路由匹配到的组件将渲染在这里 --> <router></router> ...
在当前路由中有一个toArticle方法可以跳转到article页面 methods:{ toArticle:function(index) { this.$router.push({...导致这样的原因是因为params需要通过name来获取,这里就要明白query和params的区别了 que
query 方式传参和接收参数 传参: this.$router.push({ path:’/xxx’ query:{ id:id } }) this.$router.push 传参时, 并不会引起页面刷新。需要重新请求数据,代码如下。 <div>shopName:{{shop.sho
传递参数的方法: 1.Params 由于动态路由也是传递params的,所以在 this...页面通过path和query传递参数,该实例中row为某行表格数据 在目标页面通过this.$route.query获取参数: this.$route.query.row.xxx 以上这篇
今天做项目时踩到了vue-router传参的坑(jquery和params),所以决定总结一下二者的区别。 1.jquery方式传参和接收参数 传参: this.$router.push({ path:'/xxx' ...1.$router为VueRouter实例,想要导航到不
在嵌套路由中,父路由向子路由传值除了query外,还有params,params传值有两种情况,一种是值在url中显示,另外一种是值不显示在url中。 1、显示在url中 ... <!-- router-view 路由...import VueRouter from 'vue-
2.params方式传递参数 this.$router.push({ name:'路径名称' query:{ idname:id } }) 接收的方式:this.$route.params.id 代码 this.$router.push({ path: '/container', params: { url: this.func.u
详解Vue router路由,1.基本使用 2.几个注意点 3.多级路由(多级路由) 4.路由的query参数 5.命名路由 6.路由的params参数 7.路由的props配置 8.编程式路由导航 9.缓存路由组件
vue-router 之动态路由 vue-router官网上面是这样说的 // 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 然后,我就这样写了: this.$router.push({path...
<router to=”{path:’/test’,query:>跳转</router>(id是参数) 使用:this.$route.query.id 2.路径:http://localhost:8081/#/test/1 <router to=”‘/test/’+id”>跳转</router>(id是参数) 路由: 使用:this.$...