VUE框架CLI组件化配置Router使用params传递参数机制解析------VUE框架
source link: https://blog.51cto.com/u_16322355/9101156
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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;- 赞
- 收藏
- 评论
- 分享
- 举报
Recommend
-
120
最近在整理项目中代码，在组件之间数据传递遇到了问题，所以做了这次总结，如有不对的地方，望指正。 父组件如何将数据传到子组件中 父组件可以通过Prop传递数据到子组件中。 这里需要注意的是： Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是
-
23
PHP RFC: Named Arguments Date: 2013...
-
5
如何在ElementUI组件传递其他参数? WEB前端 Vue.js 2020年8月18日
-
3
如何解决 React 中组件传递方法链路很长的问题？ V2EX › React 如何解决 React 中组件传递方法链路很长的问题？
-
4
$router和$route的区别，路由跳转方式name 、 path 和传参方式params 、query的区别发布于 35 分钟前一、$router和$route的区别$router :...
-
4
Abhi Raj Posted on Mar 3...
-
5
前言 路由传参的时候, 有俩兄弟, 一个叫 query , 一个叫 params 你说他们俩长得也不像吧, 可这用法实在是太类似了 下面就让我们分别从vue 路由和Node 接...
-
3
element ui框架（路由参数传递）
-
2
First routes in NextJs – static pages and router query params Let's see how we can set up the routes in our NextJs apps. By the end of this tutorial, we will build a simple app with two static pages and on...
-
4
在 Vue.js 中使用事件总线在组件之间传递数据 作者：一川翻译 2023-07-28 13:55:40 虽然事件总线最初似乎是组件间通信的便捷方法，但建议探索替代选项，例如provide/inject或全局状态管理。这些替代方案为促进组件...
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK