Vue--vue-router （三）router方法

在vue搭建的项目中，我们可以通过点击<router-link>创建的链接来进行页面的跳转，除此之外，还可以直接使用router的实例方法在编程时实现页面跳转。

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

在vue实例中，我们可以通过$router访问路由实例，因此可以调用this.$router.push()

其实在使用<router-link :to='...'>进行跳转时，内部同样是调用router.push('')

router.push()在使用时会向history栈增加一条记录，在用户点击浏览器后退按钮时，回退到上一次url。

该方法的参数可以是一个字符串，也可以是一个描述地址的对象。

//参数为一个字符串
router.push('home');
//参数为描述地址的对象
router.push({path: 'home'})
//参数为命名路由
router.push({name: 'user', params: {userId: 123} })
//带查询参数，后面会变成/register?plan=private
router.push({path: 'register', query: {plan: 'private'}})

当参数中提供了path后，params会被忽略，但是query不会被忽略

如果参数中需要有params的信息，可以用如下写法

const userId = 123;
router.push({name: '/user', params: {userId}}); //--> /user/123
router.push({path: `/user/${userId}`}); //--> /user/123
//下面的params会被忽略
router.push({path: '/user', params: {userId}}); //--> /user

对于<router-link>，这些规则同样适用

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

router.replace()不会向history栈添加新的信息，而是会替换当前的url。

<router-link :to="..." replace> === router.replace('...')

其余跟router.push()一样。

router.go(n)

该方法的参数是一个整数，表示在history的记录中前进或者后退多少步。

//前进一步
router.go(1);
//后退一步
router.go(-1);