编程式路由导航

介绍：

编程式导航就是给元素写事件,可以使用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