VUE框架浏览器栈数据结构原理及route-link的replace-push混合模式解析------VUE框架

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s1">
            <h2>市区</h2>
            <ul>
                <!-- 写死信息方式传递 -->
                <!-- <li><router-link to="/hebei/city?a1=新华区&a2=裕华区&a3=长安区" active-class="selected">石家庄</router-link></li>
                <li><router-link to="/hebei/city?a1=邯山区&a2=丛台区&a3=复兴区" active-class="selected">邯郸</router-link></li> -->
                <!-- 动态拼接字符串形式传递 -->
                <!-- <li><router-link :to="`/hebei/city?a1=${sjz[0]}&a2=${sjz[1]}&a3=${sjz[2]}`" active-class="selected">石家庄</router-link></li>
                <li><router-link :to="`/hebei/city?a1=${hd[0]}&a2=${hd[1]}&a3=${hd[2]}`" active-class="selected">邯郸</router-link></li> -->
                <!-- <li>
                    // 对象形式传参实现
                    <router-link active-class="selected" :to="{
                        // name的形式不支持字符串拼接,只支持对象形式
                        // 因为子组件有了名字,就可以写名字而不是path地址嵌套了
                        name : 'shi',
                        // path : '/hebei/sjz',
                        query : {
                            a1 : sjz[0],
                            a2 : sjz[1],
                            a3 : sjz[2]
                        }
                    }">石家庄
                    </router-link>
                </li> -->
                <!-- 写死的形式 -->
                <!-- <li>
                    <router-link active-class="selected" to="/hebei/sjz/裕华区/新华区/长安区">
                    石家庄
                    </router-link>
                </li> -->
                <!-- 拼接的形式 -->
                <!-- <li>
                    <router-link active-class="selected" :to="`/hebei/sjz/${sjz[0]}/${sjz[1]}/${sjz[2]}`">
                    石家庄
                    </router-link>
                </li> -->
                <!-- 对象形式params传参 -->
                <li>
                    <!-- 当我们在router-link中设置replace=true的时候,就可以开启replace模式 -->
                    <!-- 实际上是push加replace模式 -->
                    <!-- 这个带有replace标签的route-link会替代栈顶部的标签元素 -->
                    <router-link :replace="true" active-class="selected" :to="{
                        // params形式传参,不能有path
                        // 这里只能使用name 
                        // path : '/hebei/sjz',
                        name : 'shi',
                        params : {
                            a1 : sjz[0],
                            a2 : sjz[1],
                            a3 : sjz[2]
                        }
                    }">
                    石家庄
                    </router-link>
                </li>
                <!-- <li>
                    <router-link active-class="selected" :to="{
                        // 全都用名字来代替
                        name : 'han',
                        // path : '/hebei/hd',
                        query : {
                            a1 : hd[0],
                            a2 : hd[1],
                            a3 : hd[2]
                        }
                    }">邯郸
                    </router-link>
                </li> -->
                <!-- 字符串拼接形式 -->
                <!-- <li>
                    <router-link active-class="selected" to="/hebei/hd/邯山区/丛台区/复兴区">邯郸
                    </router-link>
                </li> -->
                <!-- params字符串拼接方式实现 -->
                <!-- <li>
                    <router-link active-class="selected" :to="`/hebei/hd/${hd[0]}/${hd[1]}/${hd[2]}`">邯郸
                    </router-link>
                </li> -->
                <!-- params对象形式实现 -->
                <li>
                    <router-link replace active-class="selected" :to="{
                        name : 'han',
                        params : {
                            a1 : hd[0],
                            a2 : hd[1],
                            a3 : hd[2]
                        }
                    }">邯郸
                    </router-link>
                </li>
                <li>保定</li>
                <li>唐山</li>
            </ul>
        </div>
        <!-- 区组件 -->
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name : "Hebei",
    data(){
        return {
            sjz : ["新华区","裕华区","长安区"],
            hd : ["邯山区","丛台区","复兴区"]
        }
    }
}
</script>

<style>

</style>

<template>

    <div>

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

        <div class="s1">

            <h2>市区</h2>

            <ul>

                <!-- 写死信息方式传递 -->

                <!-- <li><router-link to="/hebei/city?a1=新华区&a2=裕华区&a3=长安区" active-class="selected">石家庄</router-link></li>

                <li><router-link to="/hebei/city?a1=邯山区&a2=丛台区&a3=复兴区" active-class="selected">邯郸</router-link></li> -->

                <!-- 动态拼接字符串形式传递 -->

                <!-- <li><router-link :to="`/hebei/city?a1=${sjz[0]}&a2=${sjz[1]}&a3=${sjz[2]}`" active-class="selected">石家庄</router-link></li>

                <li><router-link :to="`/hebei/city?a1=${hd[0]}&a2=${hd[1]}&a3=${hd[2]}`" active-class="selected">邯郸</router-link></li> -->

                <!-- <li>

                    // 对象形式传参实现

                    <router-link active-class="selected" :to="{

                        // name的形式不支持字符串拼接,只支持对象形式

                        // 因为子组件有了名字,就可以写名字而不是path地址嵌套了

                        name : 'shi',

                        // path : '/hebei/sjz',

                        query : {

                            a1 : sjz[0],

                            a2 : sjz[1],

                            a3 : sjz[2]

                        }

                    }">石家庄

                    </router-link>

                </li> -->

                <!-- 写死的形式 -->

                <!-- <li>

                    <router-link active-class="selected" to="/hebei/sjz/裕华区/新华区/长安区">

                    石家庄

                    </router-link>

                </li> -->

                <!-- 拼接的形式 -->

                <!-- <li>

                    <router-link active-class="selected" :to="`/hebei/sjz/${sjz[0]}/${sjz[1]}/${sjz[2]}`">

                    石家庄

                    </router-link>

                </li> -->

                <!-- 对象形式params传参 -->

                <li>

                    <!-- 当我们在router-link中设置replace=true的时候,就可以开启replace模式 -->

                    <!-- 实际上是push加replace模式 -->

                    <!-- 这个带有replace标签的route-link会替代栈顶部的标签元素 -->

                    <router-link :replace="true" active-class="selected" :to="{

                        // params形式传参,不能有path

                        // 这里只能使用name

                        // path : '/hebei/sjz',

                        name : 'shi',

                        params : {

                            a1 : sjz[0],

                            a2 : sjz[1],

                            a3 : sjz[2]

                        }

                    }">

                    石家庄

                    </router-link>

                </li>

                <!-- <li>

                    <router-link active-class="selected" :to="{

                        // 全都用名字来代替

                        name : 'han',

                        // path : '/hebei/hd',

                        query : {

                            a1 : hd[0],

                            a2 : hd[1],

                            a3 : hd[2]

                        }

                    }">邯郸

                    </router-link>

                </li> -->

                <!-- 字符串拼接形式 -->

                <!-- <li>

                    <router-link active-class="selected" to="/hebei/hd/邯山区/丛台区/复兴区">邯郸

                    </router-link>

                </li> -->

                <!-- params字符串拼接方式实现 -->

                <!-- <li>

                    <router-link active-class="selected" :to="`/hebei/hd/${hd[0]}/${hd[1]}/${hd[2]}`">邯郸

                    </router-link>

                </li> -->

                <!-- params对象形式实现 -->

                <li>

                    <router-link replace active-class="selected" :to="{

                        name : 'han',

                        params : {

                            a1 : hd[0],

                            a2 : hd[1],

                            a3 : hd[2]

                        }

                    }">邯郸

                    </router-link>

                </li>

                <li>保定</li>

                <li>唐山</li>

            </ul>

        </div>

        <!-- 区组件 -->

        <router-view></router-view>

    </div>

</template>

<script>

export default {

    name : "Hebei",

    data(){

        return {

            sjz : ["新华区","裕华区","长安区"],

            hd : ["邯山区","丛台区","复兴区"]

        }

    }

}

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

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