vue-router

什么是

1. 路由是单页面应用（SPA）的路径管理器。
2. vue-router是vue的官方路由插件，和vue.js是深度集成的，适用于构建单页面应用。
3. vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面中是通过超链接进行切换的，vue的单页面中，则是路径之间的切换，也就是组件的切换，路由模块的本质就是建立起url和页面之间的映射关系。

优点和缺点

• 优点：用户体验好，不需要每次都从服务器全部获取，可以快速展示给用户
• 缺点：
  • 不利于seo；
  • 使用浏览器的前进后退会重新发送请求，没法合理利用缓存；
  • 单页面无法记录滚动条之前滚动的位置，无法在前进后退的时候记住滚动的位置。

怎么用

1. 动态路由匹配
   在定义的时候通过path直接添加匹配url，path: '/cart/:cartId',，以 : 开头的是参数，可以在跳转页面中通过 $route.params.cartId 获取，在 methods 里面获取需要加 this。
2. 嵌套路由
   路由嵌套路由，也就是子路由，路由中加入 children: { path..name..component.. } 定义
3. 编程式路由
   在代码中通过js实现，主要通过 $router.push('name') 实现，也可以 $router.push({path:'name'})，或者传入参数 $router.push({path:'name?id=1'})，或者通过对象的形式传入参数 $router.push({path:'name', query: ?id=1' })，这样传入的参数在子页中通过 $route.query.id 可以获取，在 methods 里面获取需要加 this。
4. 命名路由和命名视图
   在router-link中 <router-link v-bind:to="{name: 'cart',params:{cartId:1}}">跳转</router-link> 可以通过name值，传入参数跳转

Tips: 获取路由参数时注意参数名是params还是query

原理

vue-router其实是对history的一个封装
默认是Hash模式，也就是地址栏中有一个 #
在router中添加 mode: 'history' 时变为History模式，以原生url地址的样式加载页面