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>

        <!-- 组件分为普通组件和路由组件 -->

        <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>

<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>