解决vue中params传参刷新页面参数丢失问题

本来我在vue项目开发中习惯用query传参，毕竟刷新不会丢失参数。

但是这次项目中固定为params传参，方式要改的话，需要改动的地方太多，索性就找个params传参刷新页面参数不丢失的办法。

正文

官方文档虽然有，但是实例写的不够清晰，自己这里索性整理下。

本文算是转载了其他人的帖子，详情可以翻阅底部的参考。

实现params刷新页面传参不丢参

配置路由文件router.js

export default new Router({
  routes: [
    {
      path: "/",
      redirect: "/main",
    },
    {
      path: "/main",
      name: "Main",
      component: () => import("@/views/Main.vue"),
      children: [
        {
          //path: '/testPage', //这种方式不配置参数名，页面刷新会丢失参数
          path: "/testPage/:aaa/:bbb", //这样通过name 和 params进行路由传参时，刷新页面就不会丢失参数aaa和bbb 了。
          name: "TestPage",
          component: () => import("@/views/TestPage/TestPage.vue"),
        },
      ],
    },
  ],
});

调整函数

methods: {
  //路由调整传参测试
  goRouterTest(){
    // this.$router.push('/testpage');
    this.$router.push({ name: 'TestPage', params: { aaa: '111', bbb: '222' } });
  }
}

这样传参时，地址栏就会出现参数了，这样属性就不会丢失了。

实现vue配置可选路由参数

假如下面是我们的某个路由

{
  path: 'examPaperMultiPurpose/:action/:id', //多加 ? 代表这个参数是可选的。
  name: 'examPaperMultiPurpose',
  title: '考卷管理',
  notKeepAlive: true,
  props: true,
  component: () => import ('@/views/exam/examManage/examPaperMultiPurpose.vue'),
}

当我们这样进行页面跳转时

this.$router.push( { name: 'examPaperMultiPurpose', params: {action: 'add'} } );

很显然我们在跳转时， 没有进行 id 参数 的 传递。我们在控制台也会看到这样的警告。

提醒我们缺少参数，id是一个没有定义的。

当我们有时候不是都想传递每个参数，我们可以把参数配置成可选的。配置方法为：在不想传递的参数后只要多加一个 ? 即可。如下代码：

//新增、编辑、查询考卷
{
  path: 'examPaperMultiPurpose/:action?/:id?', //多加 ? 代表这个参数是可选的。
  name: 'examPaperMultiPurpose',
  title: '考卷管理',
  notKeepAlive: true,
  props: true,
  component: () => import ('@/views/exam/examManage/examPaperMultiPurpose.vue'),
}

这样，我们就把两个参数action 和 id 配置成可选的路由参数了，之后，当我们继续进行上面的方式进行传参时，就不会警告我们 缺少参数了。

结语

这个params传参可以说是最基础的了，我以前用过，但是工作中从未深入过。

这次因为工作必须要用，也是没有办法，特别记录一下，后续忘了之后可以过来梳理一下。

参考

带参数的动态路由匹配 | Vue Router

将 props 传递给路由组件 | Vue Router

原文：解决：vue通过params传参刷新页面参数丢失问题以及实现vue路由可选参数的解决办法_路由跳转携带参数刷新页面不丢失使用props-CSDN博客