vue-router（vue-router功能，跳转方式，路由守卫，路由懒加载，使用流程，3.x和4.x使用区别）

1.vue-router实现的功能

Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

• - 嵌套路由映射
• - 模块化的、基于组件的路由配置
• - 路由参数、查询、通配符
• - 基于 Vue.js 过渡系统的视图过渡效果
• - 细致的导航控制
• - 带有自动激活的 CSS class 的链接
• - HTML5 历史模式或 hash 模式，在 IE9 中自动降级
• - 自定义的滚动条行为
• - URL 的正确编码

2.路由跳转的方式

1.声明式路由——router-link标签的to属性

组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 a 标签.

<router-link to="/user">router-link>

2.编程式路由——router.push()/router.replace()

router.push()

// 字符串
router.push('home')
 
// 对象
router.push({ path: 'home' })
 
// 命名的路由（后续参数通过this.$router.params获取）
router.push({ name: 'user', params: { userId: '123' }})
 
// 带查询参数，变成 /register?plan=private（后续参数通过this.$router.query获取）
router.push({ path: 'user', query: { userId: '123' }})

router.replace

与router.push方法类似，通过替换历史堆栈中的当前路由，以编程方式导航到一个新的 URL。

router.push()和router.replace()的区别：

• router.push()跳转后可以进行回退
• router.replace()是进行替换历史堆栈中的当前路由，所以不能进行回退

router.resolve()

返回路由地址的标准化版本。

const url = router.resolve({ path: 'user', query: { userId: '123' }})

 router.go()

// 在浏览器记录中前进一步，等同于 history.forward()
router.go(1)
 
// 后退一步记录，等同于 history.back()
router.go(-1)
 
// 前进 3 步记录
router.go(3)
 
// 如果 history 记录不够用，那就默默地失败呗
router.go(-100)
router.go(100)

3.导航守卫

导航守卫包含：

• - 全局前置守卫(router.beforeEach)
• - 全局后置守卫(router.afterEach)_做一些路由离开后的操作，如窗口缩放等
• - 全局解析守卫(router.beforeResolve)
• - 路由独享的守卫(在路由配置上直接定义 beforeEnter 守卫)
• - 组件内的守卫(组件内定义守卫)

4.完成的导航解析流程

• 1. 导航被触发。
• 2. 在失活的组件里调用 beforeRouteLeave 守卫。
• 3. 调用全局的 beforeEach 守卫。
• 4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
• 5. 在路由配置里调用 beforeEnter。
• 6. 解析异步路由组件。
• 7. 在被激活的组件里调用 beforeRouteEnter。
• 8. 调用全局的 beforeResolve 守卫(2.5+)。
• 9. 导航被确认。
• 10. 调用全局的 afterEach 钩子。
• 11. 触发 DOM 更新。
• 12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

5.路由懒加载

路由懒加载可以实现在访问的时候去加载对应的组件，并且通过懒加载的方式实现代码的分包

const router = new VueRouter({
  routes: [{ path: '/foo', component: () => import('./Foo.vue') }]
})

6.vue-router使用流程

1. 下载vue-router依赖
2. 编写路由配置，全局注入router
3. 在vue实例上进行挂载
4. 使用router-view用于承载页面

7.router 3.x与4.x的区别

官方文档 https://router.vuejs.org/zh/guide/migration/index.html

• 3.x使用new VueRouter创建，4.x使用createRouter创建
• 3.x的路由模式传入的是mode值为'hash'和'history'，4.x传入的是history值为createWebHashHistory()和createWebHistory()
• 3.x的挂载方式是通过router属性来挂载，4.x通过链式操作的方式进行挂载

const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})
 
// 4.x
const router = VueRouter.createRouter({
  routes, // `routes: routes` 的缩写
})

// 3.x
const router = new VueRouter({
  mode: 'history', // mode: 'hash'
  routes: [...]
})
 
// 4.x
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(), // history: createWebHistory()
  routes,
})

// 3.x
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
 
// 4.x
createApp(App).use(router).mount('#app')