编程式路由导航

Posted 2023-02-26 0722tian

介绍：

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