刷新页面后 this.$route.params 为空

前言：如果这篇文章 对你有帮助，请不要吝啬你的赞。😃

深入学习 vue-router时，按官方文档的教程看下来，结果发现刷新页面后，打印的this.$route.params 为空

Vue2

问题复现

路由配置：

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const router = new VueRouter({
  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      name: "Home",
      component: () => import("../components/Home.vue"),
    },
    {
      path: "/user/:id",
      name: "User",
      component: () => import("../components/User.vue"),
    },
  ],
});

export default router;

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    name: "App",
    created() {
      console.log(this.$route.params);
    },
  };
</script>

解决方案

1. 在导航守卫中获取

router.beforeEach((to, from, next) => {
  console.log(to.params);
  next();
});

2. 在跳转后的页面获取，而不是在 app.vue 中获取

User.vue

<template>
  <h2>User</h2>
</template>

<script>
  export default {
    created() {
      console.log(this.$route.params);
    },
  };
</script>

<style scoped>
  h2 {
    color: purple;
  }
</style>

3. 在 updated生命周期钩子中获取(可能实际开发用不上)

为什么会出这个问题呢？

以下是个人现阶段的理解。(可能有误)

结论：此时打印 this.$route.params应该在 updated生命周期钩子中打印

首先先在 created和 mounted钩子中打印 this.$route看一下情况。

发现，信息不符合。猜测可能是组件创建、渲染阶段时，路由还没有跳转，所以打印的信息不对。路由跳转后，修改数据 this.$route是在数据更新阶段，所以获取最新的路由信息应该在 updated中获取。

问题解决

Vue3

首先，路由配置也不太一样

import { createRouter, createWebHashHistory } from "vue-router";

const routes = [
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    name: "Home",
    component: () => import("../components/Home.vue"),
  },
  {
    path: "/user/:id",
    name: "User",
    component: () => import("../components/User.vue"),
  },
];

const router = new createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

解决方案

1. 在导航守卫中获取

和 Vue2 的相同。

2. 在跳转后的页面获取，而不是在 app.vue 中获取

这个在开发中用到的可能性还大一些。毕竟开发时每个页面都需要路由信息的很少，都需要的话就可以采用上面在导航守卫中获取的做法

User.vue

<template>
  <h2>User</h2>
</template>

<script setup>
  import { useRoute } from "vue-router";
  import { onUpdated } from "vue";

  const route = useRoute();

  console.log(route.params);
</script>

<style scoped>
  h2 {
    color: purple;
  }
</style>

效果和上图一样

3. 强行实现(不建议)

Vue3 中，针对 Vue2 的解决方案 3 不再有效。在 Vue3 中，路由的变化不再属于是数据的更新，所以也不会触发 onUpdated钩子

app.vue

<template>
  <router-link to="/home">首页</router-link>
  <router-view></router-view>
</template>

<script setup>
  import { useRoute } from "vue-router";
  import { onUpdated } from "vue";

  const route = useRoute();

  // console.log(route.params)

  onUpdated(() => {
    console.log(route.params);
  });
</script>

那么怎么解决呢？

这个只是个人学习时，想到的暴力法。(现在也只会这个暴力法，开发时应该是嗤之以鼻的做法)

app.vue

<template>
  <router-view></router-view>
</template>

<script setup>
  import { useRoute } from "vue-router";
  import { onUpdated } from "vue";

  const route = useRoute();

  setTimeout(() => {
    console.log(route.params);
  }, 200);
</script>

效果还是同上

最后的坑(有能解释的希望评论告知)

app.vue

<template>
  params: {{ route.params }}
  <router-view></router-view>
</template>

<script setup>
  import { useRoute } from "vue-router";
  import { onUpdated } from "vue";

  const route = useRoute();

  console.log(route);
  console.log(route.params);
</script>