vue项目切换页面会白屏,刷新之后才会正常显示(已解决)

这篇具有很好参考价值的文章主要介绍了vue项目切换页面会白屏,刷新之后才会正常显示(已解决)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

面对这种问题有两个方面:

1.就是<template>中没有div标签</template>

错误写法:

<template>

直接开始布局了

</template>

正确写法:  切记:div标签必须是包裹住所有的标签,除了<template>外这个div就是爹

<template>
<div>
开始布局
</div>
</template>

2.<template>中有div标签</template>

错误写法:原因:他会把注释当作为一个节点,所以div就不是最大的容器了,他要先识别div标签,在识别div里面的标签,这时又多了其他节点就会出现白屏

<template>
 <!-- <zujian @seleted="shuju" /> -->
<div>
开始布局
</div>
    <!-- <zujian @seleted="shuju" /> -->
</template>

正确写法:注释写到div里面,任何除了这一!个div标签外都放到div里面文章来源地址https://www.toymoban.com/news/detail-684782.html

<template>
<div>
 <!-- <zujian @seleted="shuju" /> -->
开始布局
    <!-- <zujian @seleted="shuju" /> -->
</div>
</template>

到了这里,关于vue项目切换页面会白屏,刷新之后才会正常显示(已解决)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目关于iframe嵌套的页面,在切换tab标签时会被重新刷新的问题处理方案

    这两天工作中遇到一个这样的需求,切换tab标签时,要求对应的tab页面不刷新,但是项目中加入了一部分含有iframe的页面,在切换路由的过程中,如果使用keep-alive是达不到缓存ifram嵌套的页面效果的。 vue中的keep-alive 1.原理:vue 的缓存机制并 不是直接存储 DOM 结构 ,而是将

    2024年02月04日
    浏览(40)
  • vue 如何实现页面操作之后自动刷新

    近半年时间在接触vue写pc页面,文中内容即在实际的开发过程中遇到的实际问题。 需要在app.vue文件按照如下代码设置 然后在具体的页面的export default中,新增下面一行设置  然后在其他接口调用完毕之后,执行下面语句,也就是你想在什么操作之后进行刷新重载页面,加上下

    2024年02月11日
    浏览(32)
  • Vue项目中强制刷新页面的方法

    我们在动态切换组件的过程中,导航栏和底栏不动,动态切换中间区域的情况,在首页可以进行跳转任意组件,在组件与组件之间不能相互跳转,路由发生了变化,但是页面未改变,这时我们就需要强制刷新页面。 强制刷新页面的方式有三种: ①location.reload()  ②this.$route

    2024年02月15日
    浏览(30)
  • 277/300 React+react-router-dom+Vite 二级页面刷新时,白屏问题解决

    BrowserRouter 换为 HashRouter

    2024年02月13日
    浏览(35)
  • Angular 我在点击了上一页或者下一页方法之后,重新加载渲染数据。为什么还需要再点击一次页面的其他地方才会渲染出来?

    在你的 TypeScript 代码中,当调用 nextPage_TopSelling() 或 prevPage_TopSelling() 方法时,虽然你更新了 currentPage_TopSelling 的值并调用了 reloadTopSelling() 方法,但是 Angular 并不会自动检测到这些变化并重新渲染页面。这是因为 Angular 的变化检测机制是基于异步的,在一些情况下需要手动触

    2024年03月12日
    浏览(42)
  • Vue项目nginx服务器部署刷新页面404错误

    最近想自己做点小项目练手,前端用的是vue框架,用nginx当做服务器来部署。但是当部署完成后,遇到了刷新页面和打开新页面报404错误的问题 问题就像上面描述的一样,刷新页面和打开新页面都是报404错误。 先说最终解决办法,在nginx的配置文件的location中改一下设置方式

    2024年02月17日
    浏览(43)
  • vue/react项目刷新页面出现404的原因以及解决办法

    问题描述:vue/react项目,正常的页面操作跳转,不会出现404的问题,但是一旦刷新,就会出现404报错。 产生原因:我们打开vue/react打包后生成的dist文件夹,可以看到只有一个 index.html 文件及一些静态资源,这个是因为vue/react是单页应用(SPA),只有一个index.html作为入口文件,

    2024年02月06日
    浏览(41)
  • 使用nginx方向代理部署Vue项目刷新页面404的问题解决

    部署出现的问题为:由于项目中使用的vue router 项目直接使用node环境部署项目,在同一个路由如: 192.168.1.30:/home刷新浏览器正常 nginx部署刷新不出现404 /nginx not found 如何解决? 以下是我的想法:似乎是nginx代理使其直接访问文件,而没有使项目的路由生效从而正确加载资源 这

    2024年02月07日
    浏览(41)
  • vue3.2项目中使用history路由模式刷新后页面404

    开发过程中,路由可以正常访问,打包后也可以正常访问,但是一刷新页面就会出现404错误 方法一:修改为Hash路由模式 在router/index.ts文件中,将history路由模式修改为hash路由模式即可。 history路由模式: hash路由模式: 方法二、修改后台伪静态 Nginx: Apache: 可以参考下这篇文

    2024年02月11日
    浏览(40)
  • Vue/React 项目部署到服务器后,刷新页面出现404报错

    问题描述:在本地启动项目一切正常, 部署到服务器上线后出现BUG,项目刷新页面出现404 。 起初以为是自己路由守卫或是token丢失问题,找了一圈终于解决了 产生原因: 我们打开vue/react打包后生成的dist文件夹,可以看到只有一个 index.html 文件及一些静态资源,这个是因为

    2024年02月07日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包