Vue-router总结

引用Vue-router 官方说明: 

用 Vue.js + vue-router 创建单页应用，是非常简单的。使用 Vue.js 时，我们就已经把组件组合成一个应用了，当你要把 vue-router 加进来，只需要配置组件和路由映射，然后告诉 vue-router 在哪里渲染它们。

基础部分大概分为以下几大块：

• • • 动态路由匹配
    • 嵌套路由
    • 编程式导航
    • 命名路由
    • 命名视图
    • 重定向 和 别名
    • HTML5 History 模式

• • • --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    • --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
    • 编程 式导航

    • 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=privaterouter.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 的导航方法 （push、 replace、 go） 在各类路由模式（history、 hash 和 abstract）下表现一致。

      总结：使用编程式导航时，必须是 name 和 params一起使用，path和query一起使用（例如：
    • // 命名的路由
    • router.push({ name: 'user', params: { userId:123 }})
    • // 带查询参数，变成 /register?plan=private
    • router.push({ path: 'register', query: { plan:'private' }})
      
    • ）

官方中文文档地址：https://router.vuejs.org/zh-cn/