Vue-router 页面跳转空白问题

问题描述

今天在写vue项目时遇到一个小问题，在做页面跳转的时候，跳转到某个页面时，突然页面内容部分全部变成空白。大概类似这种情况，啥也没有。

问题原因

在反复检查发现，在组件中template中有2个div标签，大概如这样

<template>
    <div>...</div>
    <div>...</div>
<template>

 写Vue的应该都知道，一个template中只能放置一个div，不能并列。我记得以前写的时候，如果放置2个并列的标签会报错，巧的是这次出现这个问题的时候，不小心放了2个并列的标签，更巧的是没有插件给我报错。所以导致了这个问题的出现。

找到问题，解决问题就很简单了，将并列的div去掉，从单一标签入口开始。大概如这样

<template>
    <div>
        <div>...</div>
        <div>...</div>
    </div>
<template>

拓展

我记得有一次，组件中没有填写内容的时候，貌似也出现过页面跳转到该页面，再返回的时候，出现页面空白的情况。也一起记录一下吧。画个图，更好理解