vue页面跳转方式不同点

  • 路由配置文件 router/index.js 
{
    path: '/processInfo_management',
    name:'processInfo_management',
    component: resolve => require(['../components/page/process/processInfo_management.vue'], resolve),
    meta: {
        title: '流程单详情',
        isKeepAlive: false
    }
},
1. this.$route.query
  • 传参数
this.$router.push({
      path: '/processInfo_management', query:{process_code: 'J20190903001T03'}
        });
  • 获取参数
    this.$route.query.process_code
  • url的表现形式(url中带有参数)
    http://localhost:8080/?#/processInfo_management?process_code=J20190903001T03

注意： 重复跳转该页面会创建多个同名页面，刷新页面会正常显示页面 如下：

image.png

2. this.$route.params
  • 传参数（ params相对应的是name query相对应的是path）
this.$router.push({
      name: 'processInfo_management', params:{processInfo_management: 'J20190903001T03'}
        });
  • 获取参数
    this.$route.params.shopid
  • url的表现形式(url中不带有参数)
    http://localhost:8080/#/processInfo_management
    注意： 重复跳转该页面不会创建多个同名页面，新页面会覆盖旧页面，如果传参刷新页面会导致传的参数为空导致一些数据获取不到
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。