Vue-Router를 사용하여 Vue 애플리케이션에서 중첩 라우팅을 구현하는 방법은 무엇입니까?

Vue-Router를 사용하여 Vue 애플리케이션에서 중첩 라우팅을 구현하는 방법은 무엇입니까?

Vue-Router는 Vue.js의 공식 라우팅 관리자로, 단일 페이지 애플리케이션에서 라우팅 기능을 쉽게 구현하는 데 도움이 됩니다. 실제 프로젝트 개발에서는 중첩된 라우팅이 필요한 시나리오를 자주 접하게 됩니다. 예를 들어 사용자 관리 시스템에는 홈 페이지 외에 사용자 목록, 사용자 세부 정보 등과 같은 하위 페이지도 있습니다. 이 기사에서는 Vue-Router를 사용하여 Vue 애플리케이션에서 중첩 라우팅을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다.

먼저 Vue-Router를 설치해야 합니다. npm 또는 Yarn을 사용하여 Vue-Router 종속성을 설치할 수 있습니다.

npm install vue-router
# 或者
yarn add vue-router

설치 후 Vue 애플리케이션의 항목 파일에서 Vue-Router를 가져와서 Vue.use() 메서드를 사용하여 등록해야 합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

그런 다음 , 라우팅 인스턴스를 생성하고 라우팅을 구성할 수 있습니다.

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/users',
    component: Users,
    children: [
      {
        path: ':id',
        component: UserDetails
      }
    ]
  }
]

const router = new VueRouter({
  routes
})

export default router

위 코드에서는 두 개의 경로를 정의합니다. 하나는 루트 경로 "/"이고, 다른 하나는 사용자 경로 "/users"입니다. , 해당 구성 요소는 사용자입니다. 사용자 라우팅에서는 하위 경로 ":id"를 정의하고 해당 구성 요소는 UserDetails입니다.

다음으로 Vue 인스턴스에서 라우터 인스턴스를 사용해야 합니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router' // 导入路由实例

new Vue({
  router, // 使用router实例
  render: h => h(App),
}).$mount('#app')

이제 Vue-Router의 기본 구성이 완료되었습니다. 다음으로 Home, Users 및 UserDetails 구성 요소를 각각 생성하고 해당 경로에서 구성 요소를 렌더링할 수 있습니다.

먼저 Home 구성 요소를 만들어 보겠습니다.

<template>
  <div>
    <h1>Home</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

그런 다음 Users 구성 요소를 만들고 이 구성 요소에 사용자 목록과 사용자 세부 정보에 대한 링크를 표시해 보겠습니다.

<template>
  <div>
    <h1>Users</h1>
    <ul>
      <li v-for="user in users" :key="user.id">
        <router-link :to="'/users/' + user.id">{{ user.name }}</router-link>
      </li>
    </ul>
    <router-view></router-view> <!--显示子路由组件-->
  </div>
</template>

<script>
export default {
  name: 'Users',
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

마지막으로 UserDetails 구성 요소를 만들어 사용자 세부 정보를 표시합니다.

<template>
  <div>
    <h2>User Details</h2>
    <p>ID: {{ $route.params.id }}</p>
    <p>Name: {{ user.name }}</p>
  </div>
</template>

<script>
export default {
  name: 'UserDetails',
  computed: {
    user() {
      const userId = parseInt(this.$route.params.id)
      return this.users.find(user => user.id === userId)
    }
  },
  data() {
    return {
      users: [
        { id: 1, name: 'User 1' },
        { id: 2, name: 'User 2' },
        { id: 3, name: 'User 3' }
      ]
    }
  }
}
</script>

위 코드에서는 $route.params.id를 사용하여 경로의 동적 매개변수를 얻고, 이 매개변수를 기반으로 해당 사용자 정보를 얻습니다.

이제 Vue-Router 중첩 라우팅 구성과 구성 요소 생성이 완료되었습니다. 브라우저에서 애플리케이션에 액세스하면 홈 페이지와 사용자 목록에 대한 탐색 링크가 표시됩니다. "사용자" 링크를 클릭하면 사용자 목록이 표시되며 각 사용자의 링크를 클릭하면 사용자 세부 정보를 볼 수 있습니다.

요약하자면 Vue-Router를 사용하여 Vue 애플리케이션에서 중첩 라우팅을 구현하려면 다음 단계를 수행해야 합니다.

1. Vue-Router를 설치하고 가져옵니다.
2. 라우팅 인스턴스를 생성하고 라우팅을 구성합니다.
3. Vue 인스턴스에서 라우터 인스턴스를 사용하세요.
4. 해당 구성요소를 생성하고 필요한 경로에 구성요소를 렌더링합니다.
5. 하위 라우팅 구성 요소를 표시하려면 보기에서 태그를 사용하세요.

위 단계를 수행하면 Vue 애플리케이션에서 중첩 라우팅 기능을 성공적으로 구현할 수 있습니다. 즐거운 글쓰기!

위 내용은 Vue-Router를 사용하여 Vue 애플리케이션에서 중첩 라우팅을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!