引用Vue-router 官方说明:
用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js 时,我们就已经把组件组合成一个应用了,当你要把 vue-router 加进来,只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染它们。
基础部分大概分为以下几大块:
-
-
- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
- 编程 式导航
-
router.push(location)
想要导航到不同的 URL,则使用
router.push
方法。这个方法会向 history 栈添加一个新的记录,所以,当用户点击浏览器后退按钮时,则回到之前的 URL。当你点击
<router-link>
时,这个方法会在内部调用,所以说,点击<router-link :to="...">
等同于调用router.push(...)
。声明式 编程式 <router-link :to="...">
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' }})
router.replace(location)
跟
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)
操作 History
你也许注意到
router.push
、router.replace
和router.go
跟window.history.pushState
、window.history.replaceState
和window.history.go
好像, 实际上它们确实是效仿window.history
API 的。因此,如果你已经熟悉 Browser History APIs,那么在 vue-router 中操作 history 就是超级简单的。
还有值得提及的,vue-router 的导航方法 (
总结:使用编程式导航时,必须是 name 和 params一起使用,path和query一起使用(例如:push
、replace
、go
) 在各类路由模式(history
、hash
和abstract
)下表现一致。 - // 命名的路由
- router.push({ name: 'user', params: { userId: 123 }})
- // 带查询参数,变成 /register?plan=private
- router.push({ path: 'register', query: { plan: 'private' }})
- )
-