Teknologian jakaminen

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Vuessa reittisieppaajia käytetään pääasiassa sieppaamiseen ja käsittelyyn ennen navigointia tietylle reitille tai poistuttaessa tietystä reitistä. Tämän mekanismin avulla kehittäjät voivat suorittaa tiettyä logiikkaa ennen reitin navigointia tai sen jälkeen, kuten luvan tarkistaminen, tietojen lataaminen, sivuhyppyjä jne.

Vue Routerissa reittisieppaajat voidaan toteuttaa seuraavilla tavoilla:

1. Globaali ennen vartijoita:

   • router.beforeEach(to, from, next): Rekisteröi yleinen esivartija Kun reitin navigointi käynnistyy, vartija kutsutaan ennen kuin reitti muuttuu.
   • Tarkoitus: Soveltuu globaalien lupien varmentamiseen, sivun latauksen edistymispalkin hallintaan jne.

     router.beforeEach((to, from, next) => {
         // 检查用户权限
         if (!userAuthenticated) {
             next('/login'); // 未认证跳转到登录页
         } else {
             next(); // 已认证则放行
         }
     });
     

2.Global Resolve Guards:

• router.beforeResolve(to, from, next): Rekisteröi yleinen jäsennyssuoja, jota kutsutaan yleisen etusuojan jälkeen ja ennen kuin navigointi vahvistetaan.

  router.beforeResolve((to, from, next) => {
      // 在导航被确认之前，进行数据加载等操作
      fetchData().then(() => {
          next();
      });
  });
  

3. Reittikohtainen vartija:

• Lisää se suoraan reititysmääritysobjektiinbeforeEnterKenttä vartiointilogiikan lisäämiseksi yhdelle reitille.

const route = {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
        // 检查用户是否有权限访问该路由
        if (userHasAccess) {
            next();
        } else {
            next('/403'); // 没有权限跳转到403页面
        }
    }
};

 

4.Osien sisäiset suojukset:

• Käytetty sisäosissabeforeRouteEnter, beforeRouteUpdate, jabeforeRouteLeaveHook-toiminnot, näitä toimintoja kutsutaan, kun reitti navigoi nykyiseen komponenttiin, kun nykyistä komponenttia käytetään uudelleen ja kun nykyinen komponentti lähtee.

export default {
    beforeRouteEnter (to, from, next) {
        // 在路由导航进入该组件前执行逻辑
        next(vm => {
            // 可以访问实例 `vm`
        });
    },
    beforeRouteUpdate (to, from, next) {
        // 在当前路由改变，但是该组件被复用时调用
        // 可以访问组件实例 `this`
        // 通常用于更新组件的数据
        next();
    },
    beforeRouteLeave (to, from, next) {
        // 在导航离开该组件的对应路由时调用
        // 可以访问组件实例 `this`
        next();
    }
}

Näiden reitin sieppaajien mekanismit voivat auttaa kehittäjiä hallitsemaan sovellusten navigointiprosessia eri tasoilla ja skenaarioissa sekä toteuttamaan toimintoja, kuten käyttöoikeuksien valvontaa, tietojen esilatausta ja sivuhyppyjä, jolloin käyttöliittymäsovellusten interaktiivinen käyttökokemus voidaan hallita ja optimoida paremmin.