vue-router - 编程式导航

除了使用 <router-link> 创建 <a> 标签来定义导航链接，我们也可以使用 router 实例的方法来编写代码来实现导航链接

router.push

在Vue实例中，可以通过 $router 访问路由实例，并使用 this.$router.push 方法来导航到不同的URL

该方法会向浏览器的history栈中添加一个新的记录，因此当用户点击浏览器的后退按钮时，会回到之前的URL

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

使用 <router-link> 可以进行声明式导航，而使用 router.push() 方法则可以进行编程式导航

两者的区别在于，前者是在模板中声明需要导航的目标地址，后者则是在Vue实例的业务逻辑中进行导航操作

当点击 <router-link> 时，内部会调用 router.push()方法，所以点击 <router-link :to="..."> 相当于调用 router.push(...), 因此属性 to 与 router.push 接受的参数对象结构完全相同

参数

router.push() 方法的参数可以是一个字符串路径，或者一个描述地址的对象

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

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

// 命名的路由，并加上参数，vue会据此生成url
router.push({ name: 'user', params: { username: 'eduardo' } })

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

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

当指定 params 时，参数的类型一般为number或string，对于可重复的参数，params的值可以是一个数组

任何其他类型（如 undefined、false 等）都将被自动字符串化，对于可选参数，可以提供一个空字符串（""）来跳过它

使用名称和参数

在声明路由时，可以使用名称来标识路由，并在导航时使用该名称来进行地址的生成

const username = 'eduardo'

// 使用名称和参数 -> /user/eduardo --- 从自动 URL 编码中获益
router.push({ name: 'user', params: { username } })

需要注意的是，当使用名称和参数时，params 不能与 path 一起使用，如果 path和params同时存在，则 params 会被忽略

如果存在path并且需要使用params, 则需要手动构建URL

const username = 'eduardo'

// 手动构建URL --- 此时我们必须自己处理编码
router.push(`/user/${username}`) // -> /user/eduardo
router.push({ path: `/user/${username}` }) // -> /user/eduardo

返回值

router.push() 方法以及其他所有导航方法都会返回一个Promise，以便在导航完成后得知导航的结果

router.replace

router.push的作用类似于 router.push，唯一不同的是, 它不会向history添加新的记录，而是直接替换当前的记录

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

也可以直接在传递给 router.push 的 routeLocation 中增加一个属性 replace: true

router.push({ path: '/home', replace: true })
// 相当于
router.replace({ path: '/home' })

router.go

router.go接收一个整数作为参数，表示在历史堆栈中前进或后退多少步，类似于 window.history.go(n)

通过router.go方法可以很方便的横跨历史，类似于 window.history.go(n)

// 向前移动一条记录，与 router.forward() 相同
router.go(1)

// 返回一条记录，与 router.back() 相同
router.go(-1)

// 前进 3 条记录
router.go(3)

// 如果没有那么多记录，静默失败
router.go(-100)
router.go(100)