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
  注意： 重复跳转该页面不会创建多个同名页面，新页面会覆盖旧页面，如果传参刷新页面会导致传的参数为空导致一些数据获取不到