Vue에서 라우팅을 사용하는 방법

Vue의 라우팅 기능을 사용하면 SPA에서 페이지 탐색을 관리하고 URL 경로를 애플리케이션 구성 요소에 매핑할 수 있습니다. 단계는 다음과 같습니다. Vue 라우팅 라이브러리를 설치합니다. 라우터 인스턴스를 만듭니다. Vue 인스턴스에 라우터를 설치합니다. 경로 링크를 정의하려면 <router-link>를 사용하세요. 라우팅 구성 요소를 표시하려면 <router-view>를 사용하세요.

Vue에서 라우팅 사용

Vue 라우팅 메커니즘 소개

Vue.js의 라우팅은 단일 페이지 애플리케이션(SPA)에서 페이지 탐색을 관리하기 위한 내장 기능입니다. 이를 통해 개발자는 애플리케이션의 다양한 구성 요소나 보기에 해당하는 다양한 URL 경로를 만들고 관리할 수 있습니다.

Vue 라우팅 사용 방법

1. Vue 라우팅 라이브러리 설치

<code class="bash">npm install vue-router@next</code>

2. 라우터 인스턴스 만들기

Vue.js 애플리케이션에서 새 Vue 라우터 인스턴스를 만듭니다.

<code class="javascript">import VueRouter from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

const router = new VueRouter({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})</code>

3. Vue 인스턴스에 라우터 인스턴스를 설치합니다.

Vue.js 인스턴스에 라우터 인스턴스를 설치합니다.

<code class="javascript">new Vue({
  router,
  el: '#app'
})</code>

4. 라우팅 링크 정의

구성 요소의 <router-link> 태그를 사용하여 라우팅 링크를 정의하세요. <router-link> 标签定义路由链接。

<code class="html"><router-link to="/about">关于我们</router-link></code>

5. 显示路由视图

在根组件中使用 <router-view> 标签显示当前激活的路由组件。

<code class="html"><router-view></router-view></code>

高级用法

动态路由

使用冒号 (:) 定义动态路由段，然后在组件中使用 $route.params

<code class="javascript">const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})</code>

5. 라우팅 보기 표시

루트 구성요소의 <router-view> 태그를 사용하여 현재 활성화된 라우팅 구성요소를 표시합니다.

<code class="javascript">const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: Admin,
      children: [
        { path: 'users', component: Users },
        { path: 'products', component: Products }
      ]
    }
  ]
})</code>

고급 사용법

동적 라우팅

🎜🎜콜론(:)을 사용하여 동적 경로 세그먼트를 정의한 다음 $route.params를 사용하여 구성 요소에서 해당 세그먼트에 액세스합니다. 🎜

<code class="javascript">router.beforeEach((to, from, next) => {
  // ...
})</code>

🎜🎜중첩 경로🎜🎜🎜 상위 경로 내에 하위 경로를 중첩하여 더 복잡한 계층적 탐색을 만듭니다. 🎜rrreee🎜🎜Route Guards🎜🎜🎜경로 가드를 사용하여 탐색 발생 전후에 특정 작업을 수행하세요. 🎜아아아아

위 내용은 Vue에서 라우팅을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!