VUE框架CLI组件化配置Router通过对象方式实现router-link传递query实现动态信息显示------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="{
                        path : '/hebei/city',
                        query : {
                            a1 : sjz[0],
                            a2 : sjz[1],
                            a3 : sjz[2]
                        }
                    }">石家庄
                    </router-link>
                </li>
                <li>
                    <!-- 对象形式传参实现 -->
                    <router-link active-class="selected" :to="{
                        path : '/hebei/city',
                        query : {
                            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="{

                        path : '/hebei/city',

                        query : {

                            a1 : sjz[0],

                            a2 : sjz[1],

                            a3 : sjz[2]

                        }

                    }">石家庄

                    </router-link>

                </li>

                <li>

                    <!-- 对象形式传参实现 -->

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

                        path : '/hebei/city',

                        query : {

                            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="s2">
            <h2>县区</h2>
            <ul>
                <!-- <li>{{ $route.query.a1 }}</li>
                <li>{{ $route.query.a2 }}</li>
                <li>{{ $route.query.a3 }}</li> -->
                <li v-for="propertyValue,propertyName in $route.query" :key="propertyName">{{ propertyValue }}</li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    name : "City",
    mounted(){
        // 所有的路由组件都有一个$route,通过这个属性可以获取到路由组件关联的路由对象
        console.log(this.$route);
        // 路由对象中有一个query属性,通过这个query属性可以接收到query方式传过来的数据
        console.log(this.$route.query);
    }
}
</script>

<style>

</style>

<template>

    <div>

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

        <div class="s2">

            <h2>县区</h2>

            <ul>

                <!-- <li>{{ $route.query.a1 }}</li>

                <li>{{ $route.query.a2 }}</li>

                <li>{{ $route.query.a3 }}</li> -->

                <li v-for="propertyValue,propertyName in $route.query" :key="propertyName">{{ propertyValue }}</li>

            </ul>

        </div>

    </div>

</template>

<script>

export default {

    name : "City",

    mounted(){

        // 所有的路由组件都有一个$route,通过这个属性可以获取到路由组件关联的路由对象

        console.log(this.$route);

        // 路由对象中有一个query属性,通过这个query属性可以接收到query方式传过来的数据

        console.log(this.$route.query);

    }

}

</script>

<style>

</style>