vue路由刷新页面后，参数丢失

查询参数：

• 用query携带：以?name=value这种方式拼接在路由后面，如/userList?taskId=23

• 用params携带：参数不会显示在url上

路径参数:

• 一个"路径参数"使用冒号:标记，作为动态路由的一部分

假设路由为以下配置：

const router = new VueRouter({
  routes: [
      {
         path: '/userList/:id',  
         name: 'userList',
         component: () => import('../views/userList/index')
      },
      {
         path: '/taskList',
         name: 'taskList',
         component: () => import('../views/taskList/index')
      }
  ]
})

携带查询参数

1.使用 query 带查询参数，url 变成 /userList?taskId=23，刷新页面后参数不会消失。

router.push({ path: '/taskList', query: { taskId: 23 }})             

2. 因为 taskId 不作为路径的一部分，刷新后 params 会丢失，也就是变成一个空对象{}

router.push({ name: 'taskList', params: { taskId: 1}})

小结： 

• path+query 刷新后参数不会丢失
• name+params 刷新后会参数会消失

携带路径参数

1. 路径为 /userList/123，刷新后参数不会消失

const id = 123
router.push({ path: `/userList/${id}` }) 

2. 因为userList为动态路由，路径为 /userList/1，刷新后参数不会消失

router.push({ name: 'userList', params: { id: 1 }})

  小结：路径参数作为路径的一部分，故刷新后参数不会丢失

获取查询参数对象：$route.query

获取路径参数对象：$route.params

如果提供了 path，params 会被忽略， 所以这里的 params 不生效

router.push({ path: '/user', params: { userId }})

路径为 /user

使用path+query这种查询参数或路径参数刷新页面后参数不会丢失。