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