3、编程式的导航

在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。

想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

 

当你点击 <router-link> 时，这个方法会在内部调用，所以说，点击 <router-link :to="..."> 等同于调用 router.push(...)。

 

 

// 字符串
this.$router.push('home')

// 对像
router.push({ path: 'home' })

// 命名路由   
router.push({ name: 'user', params: { userId: '123' } })

// 带 query 参数, 最终结果 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' } })

params如果path提供了a ，则将被忽略，而对于而言并非如此query，如上例所示。相反，您需要提供name路由的或path使用任何参数手动指定整体：

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

 

router.replace(location)
跟 router.push 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。