vue路由小节

1、router-link跳转

<router-link :to="{name:'home'}" />
<router-link :to="{path:'/home'}" replace/>

注意:

如果希望跳转后,不保留上一个页面的历史记录,可以在router-lick上加入replace
链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。

2、this.$router.push({})

methods:{
            onchange(){
                this.$router.push({            //核心语句
                    path:"/home",            //路径
                    query:{                    //路由传参时,push和query搭配使用,作用时传递参数
                        id:"123"
                    }
                })
            }
        }    
        
    //home.vue文件接收时;
        
        export default{
            data(){
                return {
                    id:''
                }
            },
            created(){                              //生命周期接收参数
                this.id = this.$route.query.id,        //接收参数关键字
                console.log(this.id)
            }
        }

注意:

query 传参类似于get,跳转之后页面url后面会拼接参数,类似于?id=1122,不重要的参数可以这样传递;
params传参类似于post,跳转后url后面不会拼接参数,但是刷新页面,id会消失;

原文地址:https://www.cnblogs.com/chaojimali/p/13424815.html