VUE框架浏览器栈数据结构原理解析------VUE框架

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s1">
            <!-- 栈数据结构 -->
            <!-- stack栈一种数据结构,当我们的元素进入称为入栈,或压栈push -->
            <!-- 进入的第一个元素在栈底部的我们称之为栈底元素 -->
            <!-- 默认情况下,栈当中是一个指针的,这个指针在默认情况下指向栈顶元素 -->
            <!-- 每次有新的元素入栈后,栈的指针都会自动向上移动指向栈顶的那个元素 --> 
            <!-- 栈顶元素先出栈,出栈,弹栈pop -->
            <!-- 栈数据结构特点,遵循先进后出,后进先出原则 -->
            <h2>市区</h2>
            <ul>
                <li>洛阳</li>
                <li>开封</li>
                <li>安阳</li>
                <li>郑州</li>
            </ul>
            <!-- 浏览器的历史记录就是存在栈这种数据结构里面的 -->
            <!-- 历史记录存放到栈有两种不同的模式 -->
            <!-- 第一种,push模式 -->
            <!-- 以追加的方式入栈 -->
            <!-- 第二种,replace模式 -->
            <!-- 以替换栈顶元素的方式入栈 -->
            <!-- 浏览器默认的模式是push模式 -->
            <!-- 操作浏览器上的前进后退并不会删除栈当中的历史记录,只是向前和向后移动指针 -->
            <!-- 只是移动了指针指向的元素 -->
        </div>
        <router-view></router-view>
    </div>
</template>
 
<script>
export default {
    name : "Henan"
}
</script>
 
<style>
 
</style>

<template>
    <div>
        <MyHeader></MyHeader>
        <div>
            <h1>省份</h1>
            <ul>
                <!-- 如果使用的是路由方式,就不能使用a标签超链接了 -->
                <!-- 需要使用vue-router提供的标签router-link -->
                <!-- <li><a href="/hebei">河北省</a></li> -->
                <!-- <li><a href="/henan" class="selected">河南省</a></li> -->
                <!-- router-link将来会被自动编译为a标签 -->
                <!-- active-class点中激活,点中的时候激活这个样式 -->
                <li><router-link to="/hebei" active-class="selected">河北省</router-link></li>
                <li><router-link to="/henan" active-class="selected">河南省</router-link></li>
            </ul>
        </div>
        <!-- 路由视图,起到一个占位的作用 -->
        <router-view></router-view>
    </div>
</template>
 
<script>
import MyHeader from "./components/MyHeader";
export default {
    name : "App",
    components : {MyHeader}
}
</script>
 
<style>
    .s1{
        margin-left: 100px;
    }
    .s2{
        margin-left: 100px;
    }
    .selected{
        background-color: aqua;
    }
</style>