vue 路由跳转方式

更新于 2019-08-15  约 4 分钟

1、方式一:标签跳转 router-link

① 不传参

<li >
  <router-link to="user">点击验证动画效果 </router-link>   
</li>

② 跳转时传参

// 先要配置路由
path: '/user/:id'

<router-link :to="'/user/' + this.id"> <router-link/>

// 接收参数
this.$route.params.id

2、方式二:事件跳转 this.$router.push()

描述:跳转到不同的url,但这个方法会向history栈添加一个记录,点击后退会返回到上一个页面。
用法:

① 字符串

this.$router.push('/home')

② 对象

this.$router.push({path:'/home'})

③ query 传参,相当于get请求,页面跳转时参数会在地址栏中显示,通过this.$route.query.id获取

// 变成 /user?id=2
this.$router.push({ 
    path:'/user',
    query:{
        id:this.id
    }
})

④ params 传参,相当于post请求,页面跳转时参数不会在地址栏中显示,通过this.$route.params.id获取

this.$router.push({ 
    path:'/user',
    params:{
        id:this.id
    }
})

注:传参是 router,接收参数是 route

3、方式三:this.$router.replace{path:'/user'}

描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。

4、方式四:this.$router.go(n)

描述:相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面。

// 在浏览器记录中前进1步,相当于history.forward()
this.$router.go(1)

// 后退一步记录,等同于history.back()
this.$router.go(-1)

// 前进三步记录
this.$router.go(3)

// 如果history记录不够用,就会失败
this.$router.go(100)
this.$router.go(-100)

5、this.router.forward() 前进一步

6、this.router.back() 回退一步

阅读 829更新于 2019-08-15

推荐阅读
目录