介绍:
编程式导航就是给元素写事件,可以使用query或replace进行传递数据
代码:
<template>
<div class="aboutone">
<h1>我是Homeone</h1>
<ul>
<li v-for="item in abouta" :key="item.id">
<!-- <router-link :to="`/about/aboutone/aboutoneson?id=${item.name}&name=${item.id}`">{{item.name}}{{item.id}}</router-link> -->
<!-- 标准对象写法 -->
<router-link :to="{
path:'/about/aboutone/aboutoneson',
query:{
id:item.id,
name:item.name,
age:item.age,
}
}"><span>{{item.name}}</span>
</router-link>
<button type="button" @click="pushShow(item)">push</button>
<button type="button">replace</button>
</li>
</ul>
<hr>
<router-view></router-view>
</div>
</template>
<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'
},
]
}
},
components: {},
methods:{
pushShow(item){
console.log(this.$router)
this.$router.push({
name:'xiangqingye',
query:{
id:item.id,
name:item.name,
age:item.age,
}
})
},
},
};
</script>
1