当前位置: 首页>后端>正文

VueRouter

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

默认是hash模式
|--支持PushState的话,监听的是popstate事件,调用history.pushStatehistory.replaceStatehistory.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) => {});
  1. 全局后置守卫
router.afterEach((to, from) => {})
  1. 路由独享的守卫
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})
  1. 组件内的守卫
  • beforeRouteEnter (无法在vue3 setup中使用):在要进入的组件创建 / 激活之前执行
    先beforeRouteEnter → 创建 beforeCreate
    先beforeRouteEnter → 激活 activated
    VueRouter,第1张
  • beforeRouteLeave
  • beforeRouteUpdate:在当前路由改变,但是该组件被复用时调用。例如【带参数的动态路由】。
    注意:keep-alive的组件激活时,路由仍然调beforeRouteEnter,而不是beforeRouteUpdate,只是组件不会重新创建,即不会走beforeCreate → mounted,而是执行activated生命周期

七、路由守卫执行顺序

VueRouter,第2张

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

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

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

https://www.xamrdz.com/backend/3es1929067.html

相关文章: