一、3.x版本下的hash模式

默认是hash模式
|--支持PushState的话，监听的是popstate事件，调用history.pushState、history.replaceState、history.go这些history的API
|--不支持的话，监听hashchange事件，更改window.location.hash、或者调用window.location.replace

• 通过popstate来监听路由变化，pushState方法不会触发页面刷新，地址栏会有反应，router-view 将显示与 url 对应的组件

• url后跟hash值，http://localhost:8080/mobile/#/user/menu，利用hash(即#以及后面的内容)匹配组件并渲染。每一次改变Hash，都会在浏览器的访问历史中增加一个记录。此外Hash虽然出现在URL中，但不会被包括在HTTP请求中，即#及之后的字符不会被发送到服务端进行资源或数据的请求，只是用来指导浏览器动作的，对服务器端没有效果，因此改变Hash不会重新加载页面

二、路由跳转

底层调用history的api：

• push → history.pushState
• replace → history.replaceState
• forward → history.go(1)
• back → history.go(-1)
• go → history.go

三、路由传参

编程式导航跳转 useRouter.push({})

1. 如果提供了 path，则params 会被忽略
2. query会出现在地址栏（?之后），刷新不会丢失

声明式导航跳转

 <router-link :to="{ name:'router1', params: { id: status ,id2: status3}, query: { queryId:  status2 }}" >
      router-link跳转router1
 </router-link>

动态路由

{
        // 通过冒号+参数名的形式
        path: "/report/order/:id",
        name: "order-report",
        component: OrderReport,
}

• 此时/report/order/123、 /report/order/456都会匹配该路由，并且该组件收到的路由参数为 params: {id: '123'}，params: {id: '456'}
• 注意：当从/report/order/123导航到/report/order/456时，该组件会被重复使用，所以setup不会重新执行，可以监控onBeforeRouteUpdate

四. 动态路由addRoute

userRoutes.forEach(r => {
    router.addRoute(r);
});

addRoute会新建一条路由记录，一般用来做用户权限

五. 404路由

• 404应为路由列表的最后一项，当添加动态路由时，addRoute方法内部也会将'*'移动至最后1位

// v3.x
{
    path: '/404',
    component: NotFound
},
{
    path: '*', 
    redirect: '/404'
}

• v4.x已经删除了星标路由

// v4.x
{ path: '/:pathMatch(.*)*', component: NotFound },

【redirect到404】和【component写404】的区别：地址栏的地址是否会改变。redirect会将其他未匹配到的地址改为404

六、路由守卫

1. 全局前置守卫

const router = new VueRouter({ ... }) // v4.x为createRouter
router.beforeEach((to, from, next) => {});

2. 全局后置守卫

router.afterEach((to, from) => {})

3. 路由独享的守卫

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

4. 组件内的守卫

• beforeRouteEnter (无法在vue3 setup中使用)：在要进入的组件创建 / 激活之前执行
  先beforeRouteEnter → 创建 beforeCreate
  先beforeRouteEnter → 激活 activated
  image.png
• beforeRouteLeave
• beforeRouteUpdate：在当前路由改变，但是该组件被复用时调用。例如【带参数的动态路由】。
  注意：keep-alive的组件激活时，路由仍然调beforeRouteEnter，而不是beforeRouteUpdate，只是组件不会重新创建，即不会走beforeCreate → mounted，而是执行activated生命周期

七、路由守卫执行顺序

image.png

八. 路由钩子的3个入参 to from next

其中next的入参都有哪些类型？

1. 布尔值 ：false 取消跳转
2. 回调 ：（beforeRouteEnter 是支持给 next 传递回调的唯一守卫） vm => {} 在回调里面拿到组件实例，调用的节点是：vm beforeMount → next注册的回调 → vm mounted
3. 字符串 ：路由的path
4. 对象：跟vm.$router.push的入参一样