为啥浏览器的后退按钮会弄乱我的 Vue 组件？

Posted 2023-02-23

【中文标题】为啥浏览器的后退按钮会弄乱我的 Vue 组件？

【英文标题】：why browser's back button messes up my Vue component?为什么浏览器的后退按钮会弄乱我的 Vue 组件？

【发布时间】：2019-04-28 07:49:30

【问题描述】：

所以我有一个 vue 组件（我在我的应用中看到的第一个，它叫做 Intro.Vue），看起来像这样：

当我单击橙色按钮转到另一个组件时，一切似乎都正常。 但是当我按下浏览器的后退按钮返回到我的 Intro.vue 组件时，一切都搞砸了，看起来像这样：

知道这里可能会发生什么吗？

我正在使用 CSS 网格来布局我的应用程序。

我的代码：

<template>
<div class="my-container">
    <div class="text1">frase_inicial</div>
    <div class="my-video">
        <div id="my-video">
            <h1>Video explicativo</h1>
        </div>
    </div>

    <div class="go-button">
        <router-link to="/crear">
        <img id="go-button" src="src/assets/comenzar-button.svg">
        </router-link>
    </div>

    <div class="text2">que_es</div>

    <div class="text3">expl_mixmatch</div>
</div>
</template>

<script>
export default 
  name:'intro',  
  data () 
    return 
    frase_inicial: '¿Quieres diseñar un peluche muy original?',
    que_es: '¿Qué es Mix&Match?',
    expl_mixmatch: 'Mix&Match es el juego que permite a los niños armar sus propios peluches Monomono y darles un nombre original que llevarán bordado. ¡Con imaginación, libertad y alegría!'
    
  

</script>

<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Raleway');
html
    font-family: 'Raleway';


.my-container
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "text1" "my-video" "go-button" "text2" "text3";



.text1
    grid-area: text1;
    text-align: center;
    font-weight: bold;
    font-size: 3em;
    color: white;
    margin-top: 1em;

.my-video
    grid-area: my-video;
    text-align: center;
    font-size: 2em;
    margin-top: 1em;
    display: grid;
    grid-template-columns: 100%;


#my-video
   background: white;
   width: 640px;
   height: 480px;
   justify-self: center;


.go-button
    grid-area: go-button;
    text-align: center;
    font-size: 2em;
    margin-top: 1em;


#go-button
    height: 150px;
    width: 150px;


.text2
    grid-area: text2;
    text-align: left;
    font-size: 2em;
    font-weight: bold;
    color: white;
    margin-top: 1em;
    margin-left: 1em;


.text3
    grid-area: text3;
    text-align: left;
    font-size: 1.8em;
    margin-top: 1em; 
    color: white;
    margin-left: 1em;
    margin-bottom: 3em;


</style>

【问题讨论】：

请提供足够的代码来重现该问题。

@zero298 更新了我的帖子

【参考方案1】：

问题是我有一个 A.vue 组件，它的 CSS 类名与 B.vue 相同，它是从 A 路由的，而在 A 中，我没有在它的样式中声明 Scoped，所以它使用了B 样式，它在屏幕上生成了乱七八糟的东西。