Vue의 라우팅 제어 및 관리 기술

Vue는 매우 인기 있는 프런트엔드 프레임워크로 편리한 라우팅 제어 및 관리를 위한 라우팅 관리자를 제공합니다. 이 기사에서는 개발자가 이러한 기술을 더 잘 이해하고 적용할 수 있도록 Vue의 라우팅 제어 및 관리 기술을 자세히 살펴보겠습니다.

1. Vue Router의 기본

Vue Router는 Vue.js의 공식 라우팅 관리자이며 Vue.js의 핵심과 긴밀하게 통합되어 있으며 단일 페이지 애플리케이션의 라우팅 제어를 잘 구현할 수 있습니다. Vue Router는 경로와 구성 요소 간의 매핑을 관리하고 뷰와 데이터 상태를 효과적으로 분리하여 애플리케이션 구조를 더 명확하고 유지 관리하기 쉽게 만들어 동적 뷰 업데이트를 구현합니다.

1.1 설치 및 소개

Vue Router를 사용하기 전에 npm을 통해 설치해야 합니다. 다음 명령을 통해 설치할 수 있습니다:

npm install vue-router –save

설치가 완료되면 Vue Router를 Vue 애플리케이션에 도입하고 기본 구성을 수행해야 합니다. main.js 파일에 다음 코드를 작성할 수 있습니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'

Vue.use(VueRouter)

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue')
}, {
  path: '/contact',
  name: 'contact',
  component: () => import('./pages/Contact.vue')
}, {
  path: '*',
  redirect: '/home'
}]

const router = new VueRouter({
  mode: 'hash', // hash模式
  routes // 路由路径配置
})

new Vue({
  el: '#app',
  router, // 注册路由器
  render: h => h(App)
})

1.2 경로 탐색

Vue 라우터는 라우터 링크 태그를 사용하여 탐색, 페이지 점프, 탐색 완료 대기 등을 포함하여 다양한 경로 탐색 방법을 제공합니다. .

구성 요소에서 라우터 링크 태그를 사용하면 아래와 같이 경로 탐색을 쉽게 구현할 수 있습니다.

<router-link to="/home">首页</router-link>
<router-link to="/about">关于我们</router-link>
<router-link to="/contact">联系我们</router-link>

또한 프로그래밍 방식 탐색을 사용하여 아래와 같이 경로 점프를 구현할 수도 있습니다.

// 基本路由跳转
this.$router.push('/home')

// 带参数的路由跳转
this.$router.push({
  name: 'about',
  params: {
    id: 20,
    name: '张三'
  }
})

// 跳转后执行异步操作
this.$router.push('/about', () => {
  console.log('路由跳转完成')
})

// 返回前一个路由
this.$router.go(-1)

// 返回到命名路由
this.$router.push({
  name: 'home'
})

1.3 경로 중첩

Vue Router는 보다 복잡한 라우팅 제어 및 관리를 달성할 수 있는 다중 레벨 중첩 라우팅 구성을 지원합니다. 예를 들어 아래와 같이 상위 경로 아래에 하위 경로와 중첩된 하위 경로를 정의할 수 있습니다.

const routes = [{
  path: '/home',
  name: 'home',
  component: () => import('./pages/Home.vue')
}, {
  path: '/about',
  name: 'about',
  component: () => import('./pages/About.vue'),
  children: [{
    path: 'intro',
    name: 'about-intro',
    component: () => import('./pages/AboutIntro.vue')
  }, {
    path: 'contact',
    name: 'about-contact',
    component: () => import('./pages/AboutContact.vue')
  }]
}]

라우팅 구성 요소에서 <router-view> 태그를 사용하여 하위 경로를 차지할 수 있습니다. 상위 경로는 구성 요소이며 하위 경로는 아래와 같이 이 구성 요소의 <router-view> 태그에 렌더링됩니다.

<template>
  <div>
    <h2>关于我们</h2>
    <ul>
      <li><router-link :to="{ name: 'about-intro' }">公司简介</router-link></li>
      <li><router-link :to="{ name: 'about-contact' }">联系我们</router-link></li>
    </ul>
    <router-view></router-view>
  </div>
</template>

2. Vue Router Advanced

기본 라우팅 관리 기능 외에도 Vue는 라우터는 또한 경로 매개변수 전달, 경로 보호, 동적 라우팅 등과 같은 일부 고급 기능을 제공합니다. 이 섹션에서는 이러한 기능의 사용 및 구현에 대해 설명합니다.

2.1 라우팅 매개변수 전송

실제 개발에서는 일반적으로 현재 로그인한 사용자 정보, 기사 목록 등 일부 매개변수를 라우팅 구성요소에 전달해야 합니다. Vue Router에서는 props 속성을 통해 매개변수를 전달할 수 있습니다.

아래와 같이 경로를 정의할 때 props 속성을 사용하여 매개변수를 전달합니다.

const routes = [
  {
    path: '/user/:userId',
    name: 'User',
    component: User,
    props: true
  }
]

라우팅 구성 요소에서 props를 true로 설정하여 라우팅 매개 변수를 구성 요소의 props 속성으로 전달합니다. 예:

<template>
  <div>
    <h2>User Details</h2>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script>
export default {
  props: ['user']
}
</script>

이때 라우팅 매개변수는 사용자 속성으로 User 구성요소에 전달되며 구성요소는 this.user를 통해 이러한 매개변수를 얻을 수 있습니다.

2.2 Route Guard

Route Guard는 Vue Router에서 제공하는 중요한 기능으로, 경로 점프 과정에서 권한 확인, 로그인 판단 등의 작업을 수행할 수 있습니다. Vue Router는 글로벌 가드, 경로 독점 가드, 구성 요소 내 가드라는 세 가지 유형의 경로 가드를 제공합니다.

전역 가드에는 라우팅 점프 전, 점프 성공 후, 전체 라우팅 프로세스가 완료된 후에 가로채는 beforeEach, beforeResolve 및 afterEach가 포함됩니다. 예:

// 路由跳转前进行权限验证
router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth) {
    if (authService.isAuthenticated()) {
      next()
    } else {
      next({
        name: 'login'
      })
    }
  } else {
    next()
  }
})

경로 독점 가드는 경로가 정의될 ​​때 구성되거나 구성 요소 내부에서 구성될 수 있습니다. 예:

const router = new VueRouter({
  routes: [{
      path: '/admin',
      component: Admin,
      children: [
        {
          path: 'dashboard',
          component: Dashboard,
          beforeEnter: (to, from, next) => {
            if (authService.isAdmin()) {
              next()
            } else {
              next({
                name: 'login'
              })
            }
          }
        }]
      }]
 })

구성 요소 내의 가드는 라우팅 구성 요소에 정의된 beforeRouteEnter, beforeRouteUpdate 및 beforeRouteLeave 함수입니다. 예:

export default {
  beforeRouteEnter(to, from, next) {
    console.log('进入路由组件')
    next()
  },
  beforeRouteUpdate(to, from, next) {
    console.log('更新路由组件')
    next()
  },
  beforeRouteLeave(to, from, next) {
    console.log('离开路由组件')
    next()
  }
}

2.3 동적 라우팅

동적 라우팅은 URL 매개변수를 기반으로 경로를 동적으로 일치시키는 기술을 의미합니다. Vue Router는 라우팅 매개변수를 기반으로 동적 매칭 기능을 제공하며, 다양한 매개변수를 기반으로 라우팅 점프 및 구성 요소 렌더링을 수행할 수 있습니다.

예를 들어 경로를 정의할 때 아래와 같이 콜론 ":"을 사용하여 매개변수를 지정할 수 있습니다.

const routes = [
  {
    path: '/posts/:postId',
    component: Post,
    props: true
  }
]

컴포넌트 내부에서는 아래와 같이 this.$route.params를 통해 경로 매개변수를 가져올 수 있습니다. :

export default {
  mounted() {
    console.log('PostComponent: ' + this.$route.params.postId)
  }
}

라우팅 시 $router.push 메소드를 사용하여 동적 경로 일치를 수행할 수 있습니다. 예:

this.$router.push({
  path: '/posts/' + id
})

III. 요약

이 기사에서는 경로 탐색 및 Vue Router의 기본 사용 및 고급 기능을 소개합니다. 경로 중첩, 라우팅 매개변수, 라우팅 가드 및 동적 라우팅 등 Vue Router는 Vue.js의 중요한 라우팅 관리자로, 프런트 엔드 애플리케이션의 라우팅 제어 및 관리를 더 잘 구현하는 데 도움이 됩니다. 이 기사가 여러분에게 영감을 주고 Vue Router 기술을 개발에 더 잘 적용하는 데 도움이 되기를 바랍니다.

위 내용은 Vue의 라우팅 제어 및 관리 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!