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

Question

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

在左边有一个垂直菜单(在类星体Q抽屉上)。

接下来，也在左边，有一个邮件列表(在Q抽屉中的类星体Q列表上)。

当选择每一项时，相应的内容将显示在右边(在类星体Q-页上)。

预期操作：

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

请注意，列表组件只呈现一次；也就是说，每次从列表中选择项时，它都不会再次呈现，并且在右侧显示内容时仍然是可见的。

问题：

当我选择邮件列表中的第一项时，它正常工作，并且如预期的一样，邮件内容将显示在q页上。

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

{ node_modules/vue/dist/vue.runtime.esm.js:1853:26)"}：" NavigationDuplicated "，名称："NavigationDuplicated"，消息：“不允许导航到当前位置("/mailcontent")，堆栈：”新NavigationDuplicated上的错误“(webpack-int…NavigationDuplicated)

我希望就如何解决这一问题提出建议。

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

路由：第二个布局是另一个布局的子布局

const routes = [
  {
    path: "/index",
    component: () => import("layouts/AppLayout.vue"),
    children: [
      { path: "/home", component: () => import("pages/Home.vue") },
      {
        path: "secondlayout",
        component: () =>  import("Layouts/MailsPlace.vue"),
        children: [
            { path: "/mailcontent",  name: 'mailcontent', component: () => import("pages/MailContent.vue") },
        ]
      }
    ]
 }
];

第二个布局，其中电子邮件应用程序(列表和内容)被呈现为带有q折叠和路由器视图的。

<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>

使用mailitemclick方法的邮件列表项目

<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>

Answer 1

当我有一个router-link指向同一条路径时，我就遇到了这种情况。例如/products/1。

用户可以单击产品，但是如果已经单击了产品(并且组件视图已经加载)，并且用户尝试再次单击该产品，则错误/警告将显示在控制台中。

您可以通过添加catch块来解决这个问题。

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

        }
    },

但是在邮件内容中，您需要使用watch来调用函数，并在挂载中进行第一次调用。

临时例子-

    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来避免单击和捕捉-

<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") },
    ]
  }
]