VueRouter

• 通过对该函数进行构造调用，可以获得路由器对象

组件

1. router-view
   • 展示与当前路由路径匹配的组件
2. router-link
   • 用来实现让用户点击跳转路由地址的功能，需要传入to属性，告知点击之后跳转的路由地址

对象

1. $router
   • 路由器实例对象，相当于一个全局的路由器对象
2. $route
   • 当前路由对象，包含具体的路由名称，路由路径，query，params等属性

配置对象

• mode：用于指定当前路由模式
  1. hash
     • 优点：兼容性好，后端不需要做任何的配置
     • 缺点：路径中带#，会导致锚点功能无法使用
     • 原理：
       1. 控制地址栏变化：通过window.location.hash="/xxx"操作浏览器的地址栏，并且页面不会重新请求
       2. 监听地址栏变化：通过window身上的hashchange事件监听变化
  2. history
     • 优点：不会影响锚点功能
     • 缺点：兼容性较差，项目上线时，后端需要进行专门的配置
     • 原理：
       1. 通过window.history.pushState(data,title,url)可以操作浏览器的地址栏，并且保证页面不会重新请求
       2. 通过window身上的popState事件，可以监视地址栏变化，但只能监视浏览器的前进和后退
• routes：包含所有路由对象的数组
  • 对象属性
    1. path：路由地址
    2. name：路由名称
    3. component：路由地址匹配时的组件

应用

1. 安装：vue-cli下用vue add router添加依赖
2. 创建router文件夹，创建index.js
3. 引入vue，引入VueRouter，引入要使用的路由组件
4. Vue.use(VueRouter)
5. 定义一个routes数组，内包含所有的路由对象
6. 构造调用VueRouter，获取路由实例对象，传入一个对象，包括mode路由模式和routes数组
7. 暴露该路由实例对象
8. main.js中引入router路由实例对象，记得添加到new Vue里面

嵌套路由（一个路由组件也可以包含子路由）

• 在routes路由数组中，某个需要的路由对象里面定义children子路由数组，格式同routes

导航方式

1. 声明式导航
   • <router-link to="/xxx">
2. 编程式导航
   • router.push(...):导航到别的url，这个方法会向history栈添加一个新的记录，所以用户点击浏览器后退按钮时，会回到之前的url

• tips：
  1. 替换当前位置
     1. 声明式
        • <router-link to="/xxx" replace>
     2. 编程式
        • router.replace(...)
        • 也可以在router.push({path:"".replace:true})
  2. 横跨历史
     • router.go(1):向前移动一条记录
     • router.go(-1):返回一条记录

传参方式

1. query
2. params

路由懒加载

• VueRouter支持动态引入，当路由被访问时才加载对应组件

1. 静态导入
   • import xxx from './pages/xxx'
2. 动态导入
   • const xxx=()=> import('./pages/xxx')

• 把组件按组分块打包
  • 如果我们想把某个路由下的所有组件都打包在同一个异步块（chunk）中，只需命名chunk，用一个特殊的注释语法 const xxx=()=> import(/* webpackChunkName:"xxx" */ './pages/xxx')