解决：vue通过params传参刷新页面参数丢失问题以及实现vue路由可选参数的解决办法

最新推荐文章于 2024-02-27 16:54:00 发布

原创最新推荐文章于 2024-02-27 16:54:00 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #params传参 #params #路由传参 #动态路由

Vue.js 同时被 2 个专栏收录

74 篇文章

订阅专栏

⭐️ Vue踩过的坑

7 篇文章

订阅专栏

文章介绍了如何在Vue中实现params传参以保持刷新页面时参数不丢失，以及如何配置可选路由参数，包括使用props解耦和处理可选参数的警告。

🙋‍♂️ 实现params传参，刷新页面不丢参

🙋‍♂️ 实现vue配置可选路由参数

🙋‍♂️ 参考资料

解决vue 通过 name 和 params 进行页面传参时，刷新页面参数丢失问题以及vue路由实现可选参数

🙋‍♂️ 实现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' } });
  }
}

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

然后，可以选择配合路由解耦来使用

修改路由配置为：

{
  // path: '/testPage',  //这种方式不配置参数名，页面刷新会丢失参数
  path: '/testPage/:aaa/:bbb',  //这样通过name和params进行路由传参时，刷新页面就不会丢失参数aaa和bbb了
  name: 'TestPage',
  props: true,   //若个要解耦的 到组件中 props 中。
  component:() => import('@/views/TestPage/TestPage.vue')
}

要调整的组件生命 props：

<template>
  <div class="TestPage">
    Name路由传参{{ $route.params }}
  </div>
</template>
<script>
export default {
  name: "TestPage",
  props: {
    //将路由中的参数aaa和bbb解耦到组件上的props上
    aaa: {
      type: String,
    },
    bbb: {
      type: String,
    },
  },
  mounted() {
    console.log(
      "这是路由传的参数aaa",
      this.aaa,
      "这是路由传的参数bbb",
      this.bbb
    );
  },
};
</script>
<style scoped>
</style>

最后的效果（刷新页面参数不会丢失）：

😉 完美搞定！

当然也可以通过 path(或name) 和 query 的方式进行传参 this.$router.push({path: 路由路径，query: { 要传的参数 } })，但是这就不能进行props解耦了。

🙋‍♂️ 实现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 配置成可选的路由参数了，之后，当我们继续进行上面的方式进行传参时，就不会警告我们缺少参数了。