vue让跳转路由参数不在地址栏显示

src/router/index.js：路由配置配置name

export default new Router({routes: [//发送的页面{path:'/chat',name:'chat',component: chat},//接收参数的页面  注意这个name{path:'/taskCenter',name:'taskCenter',component: TaskCenter}]
})

跳转路由参数在地址栏显示（path;query）

path方式跳转

//简写不传参
this.$router.push('/taskCenter')
//全写传参
this.$router.push({path:'/taskCenter',query:{name1:'1',name2:'2'}})

query获取传参

this.$route.query.name;
this.$route.query.name2;

vue让跳转路由参数不在地址栏显示(name;param)

name方式跳转：push绑定的不再是path而是使用了你要发送的页面的name值

this.$router.push({name:'taskCenter', params:{id: ids, savePath: savePath}})

param获取传参：

mounted() {this.requestIds=this.$route.params.id;this.requestXmlPath=this.$route.params.savePath;
}

未搭配动态路由时导航栏时：不会在导航栏中显示传递的数据，也可以正常获得params中的数据，但是刷新页面后会丢失params中传递的数据

设置动态路由后导航栏显示效果，就算刷新页面也不会丢失params中的数据，但同时也暴漏的传递的数据

//router配置
const routes = [{path: '/chat/:id/:name',name: 'Chat',component: Chat
}]

query传参相当于get方式，会把要传递的参数显示在导航栏中。
params传参相当于post方式。默认不会把传递的参数显示在导航栏中。
query跳转路由传参显示参数这对于普通数据没什么,但是对于敏感数据，比如涉及到用户敏感信息，避免使用query。
我们可以用params方式传递参数，它不会把传递的参数显示到导航栏中。

vue让跳转路由参数不在地址栏显示相关推荐

055——VUE中vue-router之路由参数的随意设置与伪静态链接地址处理：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
vue页面跳转以及参数获取
1.页面跳转的两种方法 // 1.使用path跳转pathTo () {this.$router.push({path: '/b'})},// 2.使用name跳转nameTo () {this.$r ...
vue货币过滤器以及路由参数的使用
需求:点击放款本金进入放款订单页面,并携带当前表格的日期到即将跳转到的页面背景:使用 element ui 的框架需求1:货币过滤器 filters: {famt: function(nu ...
Vue两个取路由参数的方法
a.通过在路由上添加key/value串使用this.$route.query来取参数,例如: /router1?id=123 /router1?id=456 通过this.$route.query. ...
vue 页面跳转路由不显示内容Component inside ＜Transition＞ renders non-element root node that cannot be animated.
显示信息: Component inside <Transition> renders non-element root node that cannot be animated. 原因: ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
VUE跳转页面传值地址栏显示参数或者不显示地址栏参数
添加路由 {path: '/Qyqxhx',component: Qyqxhx,name: 'Qyqxhx',meta: {title: '页面名称'}}, params 传参 : 相当于post请求 ...
vue的跳转（打开新页面）
1.router-link跳转 // 直接写上跳转的地址<router-link to="/detail/one"><span class="spanf ...
vue加载html传参,Vue页面跳转时传参总结
1 路由跳转 &圈是的编小久据直请结未屏屏会气机页实应高lt;router-link to="/login"&gt能调页代事求都学是功发解开宗这维视如间请前框来 ...
微信小程序，路由参数的传递与获取
1. 路由参数传递: <navigator url="/pages/goodList/index?goodsClassId={{item.id}}&name={{item.na ...

vue让跳转路由参数不在地址栏显示

vue让跳转路由参数不在地址栏显示相关推荐

最新文章

热门文章