Web前端最全vue让跳转路由参数不在地址栏显示，前端开发与后端开发

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

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方式传递参数，它不会把传递的参数显示到导航栏中。

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记