VUE框架CLI组件化配置Router通过对象方式实现router-link传递query实现动态信息显示------VUE框架
原创
©著作权归作者所有：来自51CTO博客作者旧约Alatus的原创作品，请联系作者获取转载授权，否则将追究法律责任
<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>
