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更改时调用函数

在vue中更改路线后如何重新渲染已安装的组件？

2 个答案: