Solution to the problem of blank page problem when vue3 switches routing

1. The vue3 page is blank and does not report an error. It will be displayed normally after refreshing.

• Record the problem: After modifying the current page code in vue3, it will be saved, and the page will be displayed blank. The menu page will also be displayed blank. After refreshing the page, the display will be restored to normal.
• Solution: Add key to router-view:key="$"
• Add location: /layout/components/file
• Specific code:

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }" :key="$">
      <transition :enter-active-class="animante" mode="out-in">
        <keep-alive :include="">
          <component v-if="!" :is="Component" :key="" />
        </keep-alive>
      </transition>
    </router-view>
    <iframe-toggle />
  </section>
</template>

Note: If you use layout to encapsulate the layout, you add the identifier in the router-view on the main page under layout, not in the root directory of src (modification in this file will cause the routing navigation label to be closed every time you switch)

2. After switching routes, the page does not report an error and displays blank. After refreshing, the display is normal.

• Recording problems: In vue3, the page does not report an error and displays blank after only switching routes. It is displayed normally after refreshing the page, and the problem of switching routes does not display.
• Solution: You can check the following questions in turn: ① Whether the largest div box package content is included in the outermost layer of the root component label. ② Check whether there are comments directly under the template tag, and if necessary, write the comments into the div. (That is, do not directly comment under the root tag)
• Error case:

• <template> There are multiple div tags in the middle
• There is a comment between <template> and <div>

Wrong writing method (Case 1):

<template>
    <div>layout1</div>
    <div>layout2</div>
</template>

Correct writing method (Case 1):

<template>
    <div>
        <div>layout1</div>
        <div>layout2</div>
     </div>
</template>

Wrong writing method (Case 2):

<template>
 <!-- Comments -->
<div>
Start layout
</div>
 <!-- Comments -->
</template>

Correct writing method (Case 2):

<template>
<div>
 <!-- Comments /> -->
Start layout
 <!-- Comments /> -->
</div>
</template>　

Summarize

This is the article about the solution to the problem of blank page when switching vue3 routing. For more related content on blank page content of blank page of vue3 switching vue3 routing, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!