VUE框架CLI组件化配置Router使用params传递参数机制解析------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 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 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="s2">
            <h2>县区</h2>
            <ul>
                <!-- query形式接收 -->
                <!-- <li>{{ $route.query.a1 }}</li>
                <li>{{ $route.query.a2 }}</li>
                <li>{{ $route.query.a3 }}</li> -->
                <!-- params形式接收 -->
                <!-- <li>{{ $route.params.a1 }}</li>
                <li>{{ $route.params.a2 }}</li>
                <li>{{ $route.params.a3 }}</li> -->
                <!-- 遍历query的方式 -->
                <!-- <li v-for="propertyValue,propertyName in $route.query" :key="propertyName">{{ propertyValue }}</li> -->
                <!-- 遍历params的方式 -->
                <li v-for="propertyValue,propertyName in $route.params" :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);
        // 接收的params数据
        console.log(this.$route.params);
    }
}
</script>
 
<style>
 
</style>

<template>
    <div>
        <!-- 组件分为普通组件和路由组件 -->
        <div class="s1">
            <h2>市区</h2>
            <ul>
                <li>洛阳</li>
                <li>开封</li>
                <li>安阳</li>
                <li>郑州</li>
            </ul>
        </div>
        <router-view></router-view>
    </div>
</template>
 
<script>
export default {
    name : "Henan"
}
</script>
 
<style>
 
</style>

// 导入vue-router对象
import VueRouter from "vue-router";
import Hebei from "../pages/hebei.vue";
import Henan from "../pages/henan.vue";
import City from "../pages/city.vue";
// 创建路由器对象(在这个路由器对象中配置路由)
const router = new VueRouter({
    // 在这里配置所有的路由规则
    routes : [
        // 这就是一个路由
        {
            // 路由由path和component组成
            // 这个看作key
            // 只要路径检测到的是/hebei就切换到这个组件
            path : "/hebei",
            // 这个就是路由的value,路由的value是一个组件
            component : Hebei,
            // children子路由
            children : [
                // 配置子路由
                {
                    // 对于子路由来说,path不用添加/,以/开始
                    // 系统会自动添加
                    // path : "/hebei/shijiazhuang",
                    name : "shi",
                    path : "sjz/:a1/:a2/:a3",
                    // :形式可以将后续的内容视为数据
                    component : City
                },
                {
                    // 可以给路由起名字,用来防止过长导致path写一大串
                    name : "han",
                    // 数据是动态传过来的,我们只负责接收,所以两个子路由可以共享一个组件
                    path : "hd/:a1/:a2/:a3",
                    component : City
                }
            ]
        },
        {
            path : "/henan",
            component : Henan
        }
    ]
});
// 导出路由器对象
export default router;