Vue-router의 라우팅 메타정보 활용에 대한 자세한 설명

이번에는 Vue-router의 routingmetainformation 사용에 대해 자세히 설명하고, Vue-router의 라우팅 metainformation 사용 시 Notes는 무엇인지 살펴보겠습니다.

1. 배경

예전에는 프론트엔드를 작성할 때 백엔드 리턴 인터페이스를 사용했는데, 이번에는 vue를 사용했습니다. 제가 작성한 프론트엔드는 처음으로 프론트엔드와 백엔드가 분리된 것이었습니다. 백엔드는 프론트엔드에 데이터 인터페이스만을 제공했는데, 처음에는 백엔드 제어 인터페이스인 줄 알았습니다. Shenma를 렌더링하는 데 사용되었지만 나중에 생각해 보면 라우팅과 Shenma가 모두 프런트 엔드에 의해 제어되어 백엔드에 도달할 수 없어서 계속 헤매고 있었습니다. vue-router 공식 홈페이지에서 관련 내용이 있을 거라고 생각하다가 라우팅 메타 정보를 발견했는데 처음에는 무슨 뜻인지 이해하지 못하다가 나중에 알아내고 기록해 두었습니다

2. 코드 분석

공식 홈페이지 라우팅 메타정보

(1)경로 정의

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

여기의 메타 필드는 라우팅 메타 정보 필드이고, requireAuth는 이 라우팅 정보를 감지해야 하는지 표시하기 위해 만든 필드 이름입니다. true 이는 테스트해야 함을 의미하고, false는 테스트할 필요가 없음을 의미합니다(이름은 내 자신의 requireId와 같이 아무렇게나 선택할 수 있거나 너무 게으른 경우에는 a, b만 선택할 수 있음). 물론 이것부터 의미있는 이름을 지어주는 것이 더 좋습니다)

(2) js code

new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App },
 render: h => h(App),
 created () {
  this.redrct()
 },
 methods: {
  redrct () {
   router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresId)) { //这里meta字段的名称要与上面route里面保持一致
     // this route requires Id, check if logged in
     // if not, redirect to login page.
     if (!this.loggedIn()) { // 自己的判断条件
      next({
       path: '/', // 重定向后的路由
       query: { redirect: to.fullPath } // 登录成功之后可以根据query中的内容跳转回原来的路由(页面)
      })
     } else {
      next()
     }
    } else {
     next() // 确保一定要调用 next()
    }
   })
  },
  loggedIn () {
   var id = sessionStorage.getItem('userId')
   if (id === null) { // 未登录
    return false
   }
   return true // 别忘了这句啊，之前忘写了，调了好半天呢
  }
 }
})

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue

Three.js 상세 설명

에서 Particles.js 라이브러리를 사용하는 방법

위 내용은 Vue-router의 라우팅 메타정보 활용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!