vue中路由改变后如何重新渲染已经挂载的组件？

Question

持有

q-btn-dropdown

的组件在路由更改之前就已渲染。路由变化发生在用户登录时，因此当组件具有

helloGuest()

时，仅调用一次

q-btn-dropdown

。那么如何重新渲染持有

q-btn-dropdown

的组件，以便调用

helloGuest()

并更新

q-btn-dropdown

呢？

methods: {
login() {
  this.$axios.post('login', this.formData).then(async (res) => {
    console.log(res);
    await localStorage.setItem('user', JSON.stringify(res));
    await localStorage.setItem('token', res.token);
    this.$router.push('/');
  }).catch((error) => {
    this.error = {
      email: error.response.data.message,
    };
  });
},


   <q-btn-dropdown flat dense
    :label="helloGuest()"
    class="gt-xs"
    >
 helloGuest() {
  const userName = JSON.parse(localStorage.getItem('user')) || {};
  console.log('[isauth]', this.isAuthenticated);
  console.log('[userName]', userName);
  console.log('[router]', this.$router);
  if (this.isAuthenticated) {
    // this.$forceUpdate();
    return `Hello ${userName.username}`;
  }
  return 'Sign In';
},

我的路线文件看起来像这样，我还没有在着陆路线上使用安装的钩子

const routes = [{
path: '/',
component: () => import('layouts/MainDashboard.vue'),
children: [
  { path: '', component: () => import('components/FrontComponent.vue'), meta: { requiresAuth: false } },
  { path: '/product_details/:productId', component: () => import('components/ProductDetails.vue'), meta: { requiresAuth: false } },
  { path: '/cart', component: () => import('../cart/ShoppingCart.vue'), meta: { requiresAuth: false } },
  { path: '/checkout', component: () => import('../cart/CheckoutComponent.vue'), meta: { requiresAuth: false } },
  {
    path: '/login', name: 'Login', component: () => import('components/LoginComponent.vue'), meta: { requiresAuth: false },
  },
  { path: '/register', component: () => import('components/RegisterComponent.vue'), meta: { requiresAuth: false } },
],

Answer 1

Vue 可以重用实例，当组件相同时，因此组件中的

this.$route

会发生变化，但

created()

、

beforeMounted()

和

mounted()

钩子不会被调用。

要强制 vue 创建一个新的组件实例，您可以设置一个唯一的键，例如

<router-view :key="$route.fullPath">

另一种选择是使用观察者对

$route

中的变化做出反应：

watch: {
  "$route.params.cname": {
    handler(cname) {
      // do stuff
    },
    immediate: true
  }
}

Answer 2

最好的解决方案似乎是使用观察者来观察 $route 并在 $route 更改时调用函数

Answer 3

只需对原始组件进行包装，并将包装器分配给路由而不是原始组件。如下：

<script lang="ts" setup>
    import { useRoute } from "vue-router";
    import OriginalComponent from "./OriginalComponent.vue";
    const route=useRoute();
</script>

<template>
    <OriginalComponent:key="route.fullPath"></OriginalComponent>
</template>

然后将上述分配给路由器

{
    path: "/some-path/:param",
    component: OriginalComponentWrapper,
},

这将导致在任何路线更改时重新构建 OriginalComponent，包括参数等。将调用 OriginalComponent 的 onMounted