A brief discussion on the issue of the original value obtained in vue

question

The divs on both interfaces have different contents. When switching routes, what is obtained by () is the value of the original interface.

Problem code

// Page 1&lt;div &gt;aaa&lt;/div&gt;
// Page 2&lt;div &gt;bbb&lt;/div&gt;

// The routing switch is as follows:&lt;transition name="card-fade"&gt;
 &lt;router-view/&gt;
&lt;/transition&gt;
.card-fade-enter-active {
 animation: bounce-in 2s;
}

Phenomenon

When you jump from page 1 to page 2, (‘test’), you always get aaa.

On the contrary, when you jump from page 2 to page 1, (‘test’), you always get a bbb.

think

Hell, does () also have a cache? ?

So, I also tried ('test') on page 3, and when I jumped from page 1 to page 3, I also got aaa.

Hell, won’t the dom be destroyed?

But if page 1 jumps to another new page 4 and jumps back to 3, it will be displayed ('test')=null.

In other words, if there is no problem with the dom, it can be obtained if it does exist, and if it does not exist, it is empty.

reason

When I turned around and saw the route jump, what was the transition? Oh, this animation caused it! ! !

Because there is an animation when I switch between the two interfaces, there are indeed two getElementById('test') when I switch from page 1 to page 2, and I got the first one.

Reflection

1. Try not to appear nodes with the same ID, even if the pages are different, you think they will not appear at the same time.

2. Try not to pass #id when controlling the style, but append the style.class to the node to prevent the id from forgetting to modify the corresponding style due to various reasons.

Supplementary knowledge:() Get always null

() The most common reason for getting null is that js files are in the head tag

The loading order problem caused the node's information to be unable to get

Solution:

1. You can import js files under the body tag

2. Add a defer=true attribute in the introduction statement <script type="text/javascript">

The defer property specifies whether script execution is delayed until the page loads.

The above article briefly talks about the problem that what I got in vue () is the original value. It is all the content I share with you. I hope you can give you a reference and I hope you can support me more.