Vue入门（六）—— 路由转跳

路由转跳的方法有两种：

1.编程式
在方法中调用

// 转跳至/home
this.$router.push('/home')
// 前进一步
this.$router.go(1)
// 后退一步
this.$router.go(-1)
// 跳转至/user，不保留历史记录
this.$router.replace('/user')
// 转跳并传参，相当于post请求，页面跳转时参数不会在地址栏中显示,通过this.$route.params.id获取
this.$router.push({ 
    path:'/user',
    params:{
        id:this.id
    }
})
// 转跳并传参，相当于get请求，页面跳转时参数会在地址栏中显示，通过this.$route.query.id获取
this.$router.push({ 
    path:'/user',
    query:{
        id:this.id
    }
})

2.声明式

// 转跳不传参
<router-link to="home">链接</router-link>   

// 转跳传参
<router-link :to="'/user/' + this.id"> <router-link/>
// 传参的路由需要配置为
path: '/user/:id'
// 接收参数的方法为
this.$route.params.id