vue各种跳转方式

vue各种跳转方式

1.router-link

// 不带参数
<router-link :to="/home">
<router-link :to="{name:'home'}"> 
<router-link :to="{path:'/home'}"> 

// 带参数
<router-link :to="{ name: 'column', params: { id: column.id }}">跳转</router-link>
<router-link :to="`/column/${column.id}`">跳转</router-link>

2.router.push

// 不带参数
router.push('/column')
router.push({name: 'column'})
router.push({path: '/column'})
// 带参数
router.push(`/column/${column.id}`)
router.push({ name: 'column', params: { id: column.id }})

3.其他

this.$router.push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面
this.$router.replace 跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面 (就是直接替换了当前页面, 用法同push一致)
this.$router.go(n) 向前或者向后跳转n个页面，n可为正整数或负整数