웹 프론트엔드 View.js Vue의 라우팅 제어 및 관리 기술

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

Jun 25, 2023 am 08:31 AM
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> 태그에 렌더링됩니다.

&lt;template&gt;
  &lt;div&gt;
    &lt;h2&gt;关于我们&lt;/h2&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;router-link :to=&quot;{ name: 'about-intro' }&quot;&gt;公司简介&lt;/router-link&gt;&lt;/li&gt;
      &lt;li&gt;&lt;router-link :to=&quot;{ name: 'about-contact' }&quot;&gt;联系我们&lt;/router-link&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;router-view&gt;&lt;/router-view&gt;
  &lt;/div&gt;
&lt;/template&gt;
로그인 후 복사

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 속성으로 전달합니다. 예:

&lt;template&gt;
  &lt;div&gt;
    &lt;h2&gt;User Details&lt;/h2&gt;
    &lt;p&gt;{{ user.name }}&lt;/p&gt;
    &lt;p&gt;{{ user.age }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  props: ['user']
}
&lt;/script&gt;
로그인 후 복사

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

2.2 Route Guard

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

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

// 路由跳转前进行权限验证
router.beforeEach((to, from, next) =&gt; {
  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) =&gt; {
            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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue에서 echart를 사용하는 방법 vue에서 echart를 사용하는 방법 May 09, 2024 pm 04:24 PM

vue에서 echart를 사용하는 방법

vue에서 내보내기 기본값의 역할 vue에서 내보내기 기본값의 역할 May 09, 2024 pm 06:48 PM

vue에서 내보내기 기본값의 역할

Vue에서 지도 기능을 사용하는 방법 Vue에서 지도 기능을 사용하는 방법 May 09, 2024 pm 06:54 PM

Vue에서 지도 기능을 사용하는 방법

vue에서 이벤트와 $event의 차이점 vue에서 이벤트와 $event의 차이점 May 08, 2024 pm 04:42 PM

vue에서 이벤트와 $event의 차이점

vue에서 onmounted의 역할 vue에서 onmounted의 역할 May 09, 2024 pm 02:51 PM

vue에서 onmounted의 역할

vue에서 내보내기와 내보내기 기본값의 차이점 vue에서 내보내기와 내보내기 기본값의 차이점 May 08, 2024 pm 05:27 PM

vue에서 내보내기와 내보내기 기본값의 차이점

vue에 마운트된 것은 반응의 수명 주기에 해당합니다. vue에 마운트된 것은 반응의 수명 주기에 해당합니다. May 09, 2024 pm 01:42 PM

vue에 마운트된 것은 반응의 수명 주기에 해당합니다.

Vue의 후크는 무엇입니까 Vue의 후크는 무엇입니까 May 09, 2024 pm 06:33 PM

Vue의 후크는 무엇입니까

See all articles