List 在另一个布局中呈现的布局中，从列表到页面依次绑定列表项值

最好的例子来说明我正在努力开发的是一个桌面电子邮件应用程序

在左侧，类星体q抽屉上有一个垂直菜单

接下来，同样在左边，在q抽屉中的类星体q列表上有一个邮件列表

选择每个项目后，相应的内容将显示在quasar q页面的右侧

预期操作：

列表加载一次，当我依次选择列表中的各个项目时，只应使用右侧的内容，并根据请求中作为参数发送的id更新内容

请注意，列表组件仅呈现一次；也就是说，每次从列表中选择一个项目时，不会再次渲染该项目，并且当内容显示在右侧时，该项目仍然可见

问题是：

当我选择邮件列表中的第一个项目时，它会正常工作，正如预期的那样，邮件内容会显示在q页面上

当我从列表中选择第二个项目时，它不再工作，控制台上显示以下错误：

承诺导航中未捕获重复的{u名称： NavigationDuplicated，名称：NavigationDuplicated，消息： 不允许导航到当前位置/邮件内容， 堆栈：新导航重复时出错 webpack-int…node_modules/vue/dist/vue.runtime.esm.js:1853:26}

我希望能就如何解决这个问题提出建议

以下代码旨在说明主要部分中的问题：

路由：secondlayout是另一个布局的子级

第二种布局，其中使用q-drawer和router视图呈现电子邮件应用程序列表和内容

使用mailitemclick方法的邮件列表项

邮件内容

---

这发生在我身上，当时我有一个路由器链接指向同一条路由。e、 g./产品/1

用户可以单击产品，但如果产品 已单击，并且已加载组件视图，并且 用户尝试再次单击，错误/警告显示在 控制台

您可以通过添加catch块来解决此问题

但在邮件内容中，您需要使用watch进行调用，而在mounted中进行首次调用

临时示例-

    data() {
        return {
            mail: {},
            test_mails: {
                12: {
                    content_mail: '<div>test 12<div>'
                },
                122:{
                    content_mail: '<div>test 122<div>'
                }
            }
        }
    },
    mounted() {
        this.mail = this.test_mails[this.$route.params.id]
    },
    watch:{
        '$route':function () {
            this.mail = this.test_mails[this.$route.params.id]
        }
    }

---

谢谢你，帕特尔，。我一直在我的应用程序中尝试你的建议。我发现了以下内容：使用：to='/mailcontent/'+mail.id\u mail或其他解决方案，路由路径：/mailcontent/:id显然只在列表中调用first itemclick。在以下项目选择中，它不会向数据库发出请求。真奇怪！您知道哪些可能会失败吗？只需将created的代码转换为一个函数，并在mounted时调用它，在$route上添加watch，然后在watch中再次调用函数，如1解决方案中所述。您可以在watch中使用immediate:true，并避免在created中调用方法。感谢Patel提供的最后提示

<template>
    <q-layout view="lhh LpR lff" container class=" myclass shadow-2 window-height" >

        <q-drawer
            style="full-height"
            v-model="drawerLeft"
            :width="500"
            :breakpoint="700"
            elevated
            content-class="bg-grey-1"
          >
        <q-scroll-area 
            class="fit" 
            style="margin-top:80px">

             <q-list separator padding>
                  <q-separator />
                        <list-mails 
                            v-for="(mail, index) in mails" 
                            :mail="mail"                                                 
                            :key="mail.id_mail"
                            :id="index">
                        </list-mails>
                    <q-separator />
            </q-list> 
        </q-scroll-area>
      </q-drawer>

      <q-page-container>          
           <router-view></router-view>          
      </q-page-container>

</template>

<script>

export default {
  data () {
    return {        
      mails: {},

      drawerRight: false,
    }
  },

/*  watch: {
    $route(to, from) {
      console.log('after', this.$route.path);
    }
  },   
  beforeRouteUpdate(to, from, next) {
    console.log('before', this.$route.path);
    next();
  },*/          


    components: {            
        'list-mails': require("pages/ListMails.vue").default,
    },

   created: function() {
       this.listMails()
    },

    methods: {        
        listMails(){
           this.$axios.get("/listmails")        
            .then(response => {             
              if (response.data.success) {
                  this.mails = response.data.mails.data;
              } else {
                 showErrorNotify('msg');
              }
            })
            .catch(error => {         
              showErrorMessage(error.message); 
            });
        }
    }
</script>

<template>
        <q-item 
            clickable 
            v-ripple 
            exact 
            @click="mailitemclick(mail.id_mail)"
         >
          <q-item-section>
               <q-item-label side lines="2"> {{ mail.title_mail }}</q-item-label>
          </q-item-section>
      </q-item>

</template>

<script>
    export default { 
      props: ["mail"],
       methods:{
            mailitemclick(id){                
                 this.$router.push({
                     name: 'mailcontent', 
                     params: {id:id}
                });
            }
        }
    }
</script>

<template>            
      <q-page class="fit row wrap justify-center tems-start content-start" style="overflow: hidden;">
          <div style="padding:5px; margin:0px 0px 20px 0px; min-width: 650px;  max-width: 700px;" >
              <q-item>
                <q-item-label class="titulo"> {{ mail.title_mail }} </q-item-label>
                 <div v-html="mail.content_mail"></div>
                </q-item>
            </div>
      </q-page>
</template>

<script>

export default {
  name: 'mailcontent',
  data() {
  return { 
    mail: {},
    };
  },

  created() {
        this.$axios.get(`/mailcontent/${this.$route.params.id}`)                
        .then(response => {              
          if (response.data.success) {
              this.mail = response.data.mail[0])
          } else {
                 showErrorNotify('msg');
          }
        })
        .catch(error => {         
          showErrorMessage(error.message); 
        });
    }
}
</script>

    methods: {
        mailitemclick(id) {
            this.$router.push({
                name: 'mailcontent',
                params: {'id': id}
            }).catch(err => {});

        }
    },

    data() {
        return {
            mail: {},
            test_mails: {
                12: {
                    content_mail: '<div>test 12<div>'
                },
                122:{
                    content_mail: '<div>test 122<div>'
                }
            }
        }
    },
    mounted() {
        this.mail = this.test_mails[this.$route.params.id]
    },
    watch:{
        '$route':function () {
            this.mail = this.test_mails[this.$route.params.id]
        }
    }

<q-item
    clickable
    v-ripple
    exact
    :to="'/mailcontent/'+mail.id_mail"
  >
    <q-item-section>
      <q-item-label side lines="2"> {{ mail.title_mail }}</q-item-label>
    </q-item-section>
  </q-item>


children: [
  { path: '', component: () => import('pages/Index.vue') },
  {
    path: "secondlayout",
    component: () =>  import("layouts/mail-place.vue"),
    children: [
        { path: "/mailcontent/:id",  name: 'mailcontent', component: () => import("pages/mail-content.vue") },
    ]
  }
]