vue中实现路由跳转的3种方式

vue中实现路由跳转的3种方式

在JS中使用$router操作路由跳转

$router.push

跳转到指定的URL，在history栈中添加一个记录，点击后退会返回上一个页面

1.不传参(3种写法)

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

2.使用query传参（name或path）

this.$router.push({name:'home',query: {age:'12'}}) //推荐使用方式
this.$router.push({path:'/home',query: {age:'12'}})

3.使用params传参(name)

this.$router.push({name:'home',params: {age:'12'}})
this.$router.push({path:'/home',params: {age:'12'}}) //错误写法

使用path方式跳转，路由 path会忽略params ，所以path不能和params一起使用！！！

4.直接通过path传参

需要提供完整的路径字符串，包括路径和查询参数

const age = 12
this.$router.push('/home/${age}') 
this.$router.push({path:'/home/12'}) 

补充：使用$route接收路由参数

$route.query.age //html中
this.$route.query.age // script中

$route.params.age //html中
this.$route.params.age // script中

总结：
query相当于GET请求，页面跳转的时候，可以在地址栏看到请求参数,刷新页面时数据不会丢失。
params相当于POST请求，参数不会在地址栏中显示,页面刷新数据会丢失。

$router.replace

跳转到指定的url，不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。
用法同push。

// 直接path传参
this.$router.push('/home/12')
// 直接path传参
this.$router.push({ path: '/home/12' })
// name + params传参
this.$router.push({ name: 'home', params: { age: 12 }})

$router.go

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

this.$router.go(1) //前进一步 相当于history.forward()
this.$router.go(-1) //后退一步 相当于history.back()
this.$router.go(0) //刷新当前页面