[JavaScript知识库]Vue—Router基础知识学习

1、路由

前端路由核心：改变URL 但页面不进行整体的刷新
1、URL的hash
锚点 （#），本质上是改变window.location属性，我们可以通过直接赋值location.hash来改变href，但页面不刷新。
2、HTML5的history模式：pushState
history接口是html5的接口，有五种模式改变URL而不刷新页面。
3、HTML5的history模式：replaceState
4、HTML5的history模式：go

2、安装

npm install vue-router

如果已经打包好使用了 需要通过Vue.use（）使用

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3、使用

在一般使用cli创建时 可以直接选用router 如果没有选择则需要自己安装
1、创建router实例

import Vue from 'vue'
import VueRouter from 'vue-router'
 
//1 注入插件
Vue.use(VueRouter)
 
//2 定义路由
const routes =  [
]
 
//3 创建router实例
const router = new VueRouter({
  routes
})
 
//4 导出router实例
export default router

2、在mian.js挂载到vue实例中

import Vue from 'vue'
import App from './App.vue'
//导入router
import router from './router'
 
Vue.config.productionTip = false
 
new Vue({
  router, //挂载
  render: h => h(App)
}).$mount('#app')

3、创建vue组件
about.vue组件

<template>
  <div>
      <h2>我是关于标题</h2>
      <p>我是关于内容</p>
  </div>
</template>
 
<script>
export default {
    name: 'about'
}
</script>
 
<style>
 
</style>

4、配置组件和路径的映射关系

import Vue from 'vue'
import VueRouter from 'vue-router'
 
import Home from '../views/home.vue'
import About from '../views/about.vue'
 
//1 注入插件
Vue.use(VueRouter)
 
//2 定义路由
const routes =  [
  //添加映射关系
 
  {
    path: '/about',
    component: About
  }
]
 
//3 创建router实例
const router = new VueRouter({
  routes
})
 
// 4 导出router实例
export default router

5、在app.vue中使用路由

<template>
  <div id="app">
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>
</template>
 
<script>
  export default {
    name: 'App'
  }
</script>
 
<style>
 
</style>

重定向使用的是redirect

const router = new VueRouter({
  routes: [
    { path: '/a', redirect: '/b' }
  ]
})

路由组件传参
在组件中使用$route会与其对应的路由形成高度的耦合从而使得组件只能在某些特点的url上使用
限制了其灵活性
使用props将组件和路由解耦

4、导航守卫

vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。记住参数或查询的改变并不会茶法进入、离开的导航守卫
前置守卫：router.beforeEach 三个参数：

to: Route: 即将要进入的目标 路由对象

from: Route: 当前导航正要离开的路由

next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
后置钩子：afterEach
路由独享的守卫：你可以在路由配置上直接定义 beforeEnter 守卫：

5、完整的导航解析流程

1、导航被触发
2、在识货的组件里调用beforeRouteLeave守卫
3、调用全局的beforeEach守卫
4、在重用的组件里调用beforeRouteUpdate守卫
5、在路由配置里调用beforeEnter，
6、解析异步路由组件
7、在被激活的组件里调用beforeRouterEnter。
8、调用全局的beforeResolve守卫
9、导航被确认
10、调用全局的afterEach钩子
11触发Dom更新
12、调用beforeRouterEnter守卫中传给next的回调函数，穿件好的组件实例会做为回调函数 的参数传入

6、数据获取

在进入路由之后 需要从服务器获取数据，有两种方式实现：
1、导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据，在数据获取期间显示：加载中“”之类的提示
2、导航完成之前获取：导航完成之前，在路由进入的守卫中获取数据，在数据获取成功之后执行导航，

导航完成之后获取数据
在组件的rcreated钩子中获取数据，这让我们有机会在数据获取期间展示一个loading状态
在导航完成前获取数据：
我们在导航转入新的路由前获取数据 我们可以在接下来的组件beforerOUTEREnter守卫中获取数据，当数据获取成功后只调运next方法

获取参数：通过$route对象获取的在使用了vue?router的应用中路由对象会被注入每个组件。赋值为this.$route。并且当路由切换时，路由对象会被更新

7、滚动行为

在使用前端路由时 当切换到新路由时 想要页面滚到顶部，或者保持原先滚动的位置，就像重新加载页面安阳 vue-router可以做到
这个功能只在支持hostory.pushState的浏览器中可用

创建Router实例 可以使用scrollBehavior方法：

scrollBehavior (to, from, savedPosition) {
    // return 期望滚动到哪个的位置
  }

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

8、路由懒加载

在应用中的时候 路由懒加载用的比较多，打包应用的时候，JS的包会变的非常大 影响页面加载，如果能把不同的路由对应组件分割成不同的代码， 然后当路由被反问的时候才加载对应组件，
实现原理：
Vue的异步1组件和webpack的代码分割功能，实现路由组件的懒加载
在vue-router的官网中这样解释到：
首先可以把异步组件定义为返回一个Promise的工厂函数

const Foo = () =>
  Promise.resolve({
    /* 组件定义对象 */
  })

第二步：在Webpack2中我们可以使用动态import语法来定义分块点（splitpoint）

import('./Foo.vue') // 返回 Promise

结合两者：定义成功一个能够被 Webpack自动diamante分割的异步组件

const Foo = () => import('./Foo.vue')

在路由中不需要做更改就可以直接使用

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

9、$route和$router的区别

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前router跳转对象里面可以获取name、path、query、params等

最后看完其实还是有很多不是特别理解的地方 等后面复习的时候在来看一下