Vue Router 编程式导航

Posted 2020-11-26 yuxi2018

编程式导航

除了使用<router-link>声明式创建a标签来定义导航链接，还可以借助router的实例方法来跳转导航，这种通过编写JS代码来实现的方式叫编程式导航。

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

在Vue实例内部，通过$router访问路由实例。可以使用this.$router.push()方法来跳转导航。这个方法会向history栈添加一个新的记录。当点击浏览器后退按钮时，则回到之前的URL。

点击声明式<router-link to="">时，等同于调用了router.push(...)

<script>
    // 参数：可以是一个字符串，也可以是一个描述地址的对象
    router.push('home');
    router.push({ path: 'home' }); 
    // 带查询参数 /register?plan=private
    router.push({ path: 'register', query: { plan: 'private' }});
    // 命名的路由  /user/123
    router.push({ name: 'user', params: { userId: '123' }});
    // 模板字符串的形式拼接 /user/123
    const userId = 123;
    router.push({ path: `/user/${userId}` });
    // 注意：提供了path，则会忽略 params
    router.push({ path: '/user', params: { userId }}); // /user
</script>

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

替换掉当前的history记录 <router-link :to="..." replace>

router.go(n)

参数为整数，意思是在history记录中向前或者后退多少步，类似window.history.go(n)

// 前进一步，等同于 router.forward() / history.forward()
router.go(1);

// 后退一步记录，等同于 router.back() / history.back()
router.go(-1)
// n 为正则前进，为负则后退。超过边界则失败。

router.forward()

浏览器历史记录前进一步

router.back()

浏览器历史记录后退一步