Vue编程式导航

发表于 更新于 分类于 本文字数： 868 阅读时长 ≈ 1 分钟

通过 js 代码的方式来控制页面的跳转。 在 Vue 实例内部，你可以通过 $router 访问路由实例。this.$router.push()

$router

1. $router.push(路由对象 || 路由路径)
1
2
3
4
5
6
7
8
// 字符串
 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 并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的 name 或手写完整的带有参数的 path： 

1
2
3
4
5
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
2. $router.replace(路由对象 || 路由路径) 3. $router.back() 4. $router.forWard() 5. $router.go(数字)