vue-router 编程式的导航

mac2026-08-31  10

除了使用<router-link>创建a标签来定义导航链接,我们还可以借助router的实例方法,通过编写代码来实现。

router.push(location, onComplete?, onAbort?)

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

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

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

声明式编程式<router-link :to="...">router.push(...) router.push('home') router.push({path: 'home'}) router.push({name: 'user', params: {userId: '123'}}) router.push({path: 'register', query: {plan: 'private'}})

在2.2.0+,可选的在router.push或router.replace中提供onComplete和onAbort回调作为第二个和第三个参数。这些回调会在导航成功完成或终止的时候进行相应的调用。

router.replace(location, onComplete?, onAbort?)

跟router.push很像,但唯一不同的是,它不会向history添加新纪录,而是跟它的方法名一样——替换掉当前的history记录。

声明式编程式<router-link :to="..." replace>router.replace(...)

router.go(n)

这个方法的参数是一个整数,意识是在history记录中向前或向后多少步。 

 

 

最新回复(0)