您的位置：首页 > Web前端 > Vue.js

vue路由-编程式导航

2018-05-11 17:47 465 查看

除了使用 

<router-link>
 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

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

注意：在 Vue 实例内部，你可以通过 

$router
 访问路由实例。因此你可以调用 
this.$router.push
。

想要导航到不同的 URL，则使用 

router.push
 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。

当你点击 

<router-link>
 时，这个方法会在内部调用，所以说，点击 
<router-link :to="...">
 等同于调用 
router.push(...)
。

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

该方法的参数可以是一个字符串路径，或者一个描述地址的对象。例如：

// 字符串
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
：

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
 组件的 
to
 属性。

在 2.2.0+，可选的在 

router.push
 或 
router.replace
 中提供 
onComplete
 和 
onAbort
 回调作为第二个和第三个参数。这些回调将会在导航成功完成 (在所有的异步钩子被解析之后) 或终止 (导航到相同的路由、或在当前导航完成之前导航到另一个不同的路由) 的时候进行相应的调用。

注意：如果目的地和当前路由相同，只有参数发生了改变 (比如从一个用户资料到另一个 

/users/1
 -> 
/users/2
)，你需要使用 
beforeRouteUpdate
 来响应这个变化 (比如抓取用户信息)。

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

跟 

router.push
 很像，唯一的不同就是，它不会向 history 添加新记录，而是跟它的方法名一样 —— 替换掉当前的 history 记录。

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

 

router.go(n)

这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 

window.history.go(n)
。

例子

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)

// 后退一步记录，等同于 history.back()
router.go(-1)

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

// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航