vue-router

在使用vue-router之前我们先安装一下依赖，用了很久的 vue2.x 之后再来使用 vue3 ，它们二者之间创建路由的方式是不一样的。
npm install vue-router --save
npm install vue-router@next --save
脚手架创建vue3项目时，需要自己配置路由。

vue2.x

improt Vue from 'vue';
import Router from ' vue-router';
import Cop from '@/components/Cop';
Vue.use（Router）
export default new Router（{
  routes:[
    {
      path: '/',
      name: 'Cop',
      component: Cop
    }
  ]
}）

vue3.x

import {createRouter,createWebHashHistory} from 'vue-router';
import Cop from '@/components/Cop';
const router = createRouter({
   history:createWebHashHistory(),
   routes:[
    {
      path: '/',
      name: 'Cop',
      component: Cop
    }，
    {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
  ]
})
export default router

注意：vue2.x也有mode，只是创建时已经默认mode为hash了。

路由钩子
3类，7个钩子：全局路由钩子，路由配置守卫钩子，组件内的守卫钩子。

——全局路由钩子：
beforeEach（）-》 beforeEnter（）-〉 beforeRouteEnter（）- 》
前置导航守卫 -〉读取路由配置信息前 -》 进入组件前 -〉
beforeResolve（）-〉 afterEach（）
解析守卫 -》 后置导航守卫

——路由配置守卫钩子：
beforeEach()-〉beforeEnter()-》beforeRouteEnter()-〉beforeCreate()
前置路由守卫-》读取路由配置信息-〉进入组件前-》组件实例化前

——组件内的守卫钩子：
beforeRouteEnter(to, from, next){ } 进入组件前，默认不能获取组件实例 this，但是以下办法可以访问

beforeRouteEnter(to, from, next){ 
  // next()的回调函数,在进入路由,实例化执行
    next(vm => {
    // vm等价于当前组件this
  })
}

beforeRouteUpdate(to, from, next){ } 修改组件前，当前组件依然在使用路由地址改变满足以上2个条件才会执行。
beforeRouteLeave(to, from, next){ } 离开组件前。

	vue2.x	vue3.x
引入方式	new Router	createRouter
全局钩子	-	-
路由配置守卫钩子	-	next参数没有了
组件内守卫钩子	-	进入组件前和离开组件前名字改了（onBeforeRouteUpdate和onBeforeRouteLeave），next参数没了，取消修改组件前钩子
在routes不做 notFound 处理 且 浏览器访问路径 不匹配 routes	进入根路径	不会跳转到根路径，而是匹配空。router.push({path: ‘/not/found’})
动态路由匹配针对（*）	path: ‘*’	path: ‘/:pathMatch(.*)’
		不再给路径默认添加/，redirect重定向需要写全路径
router-link 标签化	使用 tag	不能使用tag 否则报错 使用slot

下次说下路由组件缓存