vue路由 跳转

声明式导航

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/foo" replace>Go to Foo</router-link>

编程式导航

router.push（）当你点击  时，这个方法会在内部调用

 

query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示

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

this.$router.push({ path: 'home' }) // 命名的路由

this.$router.push({ name: 'user', params: { userId: '123' }}) 


this.$router.push({ path: 'register', query: { plan: 'private' }})
// 带查询参数，变成 /register?plan=private

如果提供了 path，params 会被忽略,所以用 name, params,或者path后面直接带上字符串模板

const userId = '123' 
this.$router.push({ name: 'user', params: { userId }}) // -> /user/123 
this.$router.push({ path: `/user/${userId}` }) // -> /user/123

router.replace（）不会向 history 添加新记录，而是替换掉当前的 history 记录

this.$router.replace('home')

router.go(n)的参数是一个整数，意思是在 history 记录中向前或者后退多少步

// 在浏览器记录中前进一步，等同于 history.forward() 
this.$router.go(1) // 后退一步记录，等同于 history.back()  
this.$router.go(-1) // 前进 3 步记录 this.$router.go(3)