Vue 渲染一个组件两次答案

【问题标题】：Vue render a component two timesVue 渲染一个组件两次
【发布时间】：2020-12-04 17:19:03
【问题描述】：

当我登录应用程序并选择编辑某些项目时，他们会向编辑视图创建 $router.push，问题是他们渲染组件两次，我通过在挂载上执行 console.log 来解决这个问题(){}.. 但是，如果我重新加载页面并在其他时间单击编辑，它们会正确呈现，只有一次。

这是相关代码：

//listItemsView script
editItem(item) { 
  this.$router.push({ name: 'editPolicy', params:{policyTest: item}})
},

//editItemView script
export default {
  props:{
      policyTest:{
        type: Object,
        required: true,
      }
   mounted(){
      console.log(this.policyTest);
      console.log('entra');  
   },
 }

 //router script
 {
    path: '/editPolicy/', 
    name: 'editPolicy',
    component: () => import('../views/policies/editPolicy.vue'),
    props: true,
    meta:{requireAuth:true}
  }
  
  router.beforeEach((to, from, next) => {
  const user = auth.currentUser;
  if(user !== null){
    user.getIdTokenResult(true)
        .then(function ({
          claims
        }) {
          if (to.name === 'NewClient' && !claims.permissions.includes('Agregar Cliente')) {
            next({name: 'notFoundPage'});
          }else{
            //In this case the router execute this next()
            next()
          }
        })
    } else {
      if (to.matched.some(record => record.meta.requireAuth)) {
        next({name: 'SignIn'});
      } else { 
        next()
      }
  }
})

//html
<td class="text-left">
   <v-icon small class="mr-2" @click="editItem(item)">fas fa-edit</v-icon>
</td>

【问题讨论】：

看起来 Vue 在更改路由时正在尝试重用组件。您可以尝试使用<router-view :key="$route.fullPath">，如下所述：stackoverflow.com/a/52848095/10387396
它安装了两次，我的猜测是有两个不同的实例，也许检查跟踪。但您也可以键入这些组件以确保它们被重用。只需在 mount 或 log.error 中编写调试器新错误。了解实际发生的情况。

标签： vue.js vue-router

【解决方案1】：

我解决了这个问题，我正在使用 firebase 身份验证，并且在 main.js 中我正在检测用户状态更改，并且我正在创建两个 vue 实例，一个是在启动应用程序时，另一个是在用户尝试时让他们的日志记录..解决，谢谢

【讨论】：