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

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐