VUE框架CLI组件化配置Router配置使用props配置项传值------VUE框架
原创
©著作权归作者所有:来自51CTO博客作者旧约Alatus的原创作品,请联系作者获取转载授权,否则将追究法律责任
<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>{{ a1 }}</li>
<li>{{ a2 }}</li>
<li>{{ 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",
// 因为我们的组件是通过路由唤醒的,因此路由会把这个配置props传递过来
// 我们就可以在这里拿到props
props : ['a1','a2','a3'],
mounted(){
// 所有的路由组件都有一个$route,通过这个属性可以获取到路由组件关联的路由对象
console.log(this.$route);
// 路由对象中有一个query属性,通过这个query属性可以接收到query方式传过来的数据
console.log(this.$route.query);
// 接收的params数据
console.log(this.$route.params);
},
// 使用计算属性的方式
computed : {
params(){
return this.$route.params;
}
}
}
</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,
// 在路由中进行的配置
// props : {
// x : 'Jack',
// y : 'Rose'
// }
// props含有函数式写法
props($route){
// 当前路由对象会被自动传递过来
// 将来取值时会自动调用函数
// 调用这个函数对象会获取到当前路由对象
return {
a1 : $route.params.a1,
a2 : $route.params.a2,
a3 : $route.params.a3
}
// 需要在方法最后返回对象
}
},
{
// 可以给路由起名字,用来防止过长导致path写一大串
name : "han",
// 数据是动态传过来的,我们只负责接收,所以两个子路由可以共享一个组件
path : "hd/:a1/:a2/:a3",
component : City,
props($route){
return {
a1 : $route.params.a1,
a2 : $route.params.a2,
a3 : $route.params.a3
}
}
}
]
},
{
path : "/henan",
component : Henan
}
]
});
// 导出路由器对象
export default router;