0
点赞
收藏
分享

微信扫一扫

路由的params参数 组件之间通过路由传递数据

介绍:

组件之间可以通过路由query参数传递数据

需求:

路由的params参数 组件之间通过路由传递数据_Vue

 

 

路由配置:

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import aboutone from './views/Aboutone';
import abouttow from './views/Abouttow';
//引入组件
import aboutoneson from './views/Aboutoneson';

Vue.use(Router);

export default new Router({
routes: [{
// 页面开始就显示的路由
path: "/",
name: "home",
component: Home,

},
{
path: "/about",
name: "about",
component: () =>
import("./views/About.vue"),
children: [{
path: 'aboutone',
component: aboutone,
            //子组件配置
children:[
{
//修改的地方
path: 'aboutoneson/:id/:title',
component: aboutoneson,
}
]
},
{
path: 'abouttow',
component: abouttow,
},
]
}
]
});

父组件 Aboutone 传递数据的组件:

html

<template>
<div class="aboutone">
<h1>我是Homeone</h1>
<ul>
<li v-for="item in abouta" :key="item.id">
<!-- 标准对象写法 -->
<router-link :to="{
path:'/about/aboutone/aboutoneson',
             //传递需要的数据
            params:{
              id:item.id, 
              name:item.name,
              age:item.age,
             }          //显示的文本

}">{{item.name}}</router-link>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>

js

<script>
export default {
name: "aboutone",
data() {
return {
abouta: [{
name: '张三',
id: '001',
age: '18'
},
{
name: '李四',
id: '002',
age: '15'
}, {
name: '王五',
id: '003',
age: '25'
}, {
name: '赵本山',
id: '004',
age: '41'
}, {
name: '小学生',
id: '005',
age: '12'
},
]
}
},
};
</script>

子组件 详情页面 Aboutoneson  接收数据的组件:

<template>
<div id="Aboutoneson">
<h2>详情</h2>
<p>编号:{{$route.params.id}}</p>
<p>姓名:{{$route.params.name}}</p>
<p>年龄:{{$route.params.age}}岁</p>
</div>
</template>

<script>
export default{
mounted() {
console.log(this.$route);
}
}
</script>

<style>
</style>

最终效果:

路由的params参数 组件之间通过路由传递数据_Vue_02

 

 

 



举报

相关推荐

0 条评论