跳到主要内容

push

2023年05月18日
柏拉文
越努力，越幸运

一、认识​

在 Vue 实例中，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push。想要导航到不同的 URL，可以使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，会回到之前的 URL。

当你点击 <router-link> 时，内部会调用这个方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...)。关系如下:

  • 编程式导航: router.push(……)

  • 声明式导航: <router-link to="……"></router-link>

二、语法​

2.1 基础路由​

// 字符串路径
router.push('/users/eduardo')

// 模版字符串路径
router.push('/users/${username}')

2.2 命名路由​

// 命名的路由，并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })

2.3 路径路由​

// 带有路径的对象
router.push({ path: '/users/eduardo' })

// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })

// 带路径参数，结果是 /users/eduardo
router.push({ path: `/users/${username}` });

// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })

路径路由 细节如下:

  1. push() 中如果具有 path 属性, 那么 params 属性会被忽略。需要提供路由的 name 或手写完整的带有参数的 path

    // 具有 path 属性 ，params 属性会被忽略 
    router.push({ path: '/about', params: { username: "eduardo"} })  

    // 替代方案一: 提供路由的 name 

    router.push({ name: 'about', params: { username: 'eduardo' } })

    // 替代方案二: 手写完整的带有参数的 `path`

    router.push({ path: `/about/${username}` });