프로젝트에서의 Vue-router 사용 및 주의사항

프로젝트에서의 Vue-router 사용 및 주의사항

Vue-router는 단일 페이지 애플리케이션(Single Page Application)을 구축하는 데 사용되는 Vue.js의 공식 라우팅 관리자입니다. URL을 관리하고 페이지 간 새로 고침 없는 이동을 실현하여 보다 유연하고 대화형인 프런트 엔드 애플리케이션을 구축하는 데 도움을 줍니다.

1. Vue-router를 사용하세요

1. Vue-router를 설치하세요

프로젝트의 루트 디렉터리에서 npm 명령을 사용하여 설치하세요:

npm install vue-router

2. 프로젝트의 항목 파일에서( main.js 등) Vue-router 및 관련 컴포넌트 소개:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    name: 'about',
    component: About
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

위 코드에서는 home과 about이라는 두 가지 경로를 구성했으며 해당 컴포넌트는 Home과 About입니다.

3. 라우팅 내보내기 구성

프로젝트의 루트 구성 요소(예: App.vue)에서 다양한 라우팅 구성 요소를 렌더링하기 위해 태그를 추가합니다.

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

2. 사용 예

따라해 보겠습니다. Vue-router 사용 방법을 보여주기 위해 간단한 사례가 결합됩니다.

온라인으로 영화를 보기 위한 웹사이트를 예로 들어보겠습니다. 홈페이지와 영화 세부정보 페이지라는 두 페이지를 구현해야 합니다.

1. 홈페이지 구성 요소를 만듭니다

src/views 디렉터리에 Home.vue 파일을 만들고 다음 코드를 추가합니다.

<template>
  <div class="home">
    <h1>欢迎来到电影在线观看网站</h1>
    <button @click="goToDetail">查看电影详情</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToDetail() {
      this.$router.push('/detail')
    }
  }
}
</script>

2 영화 세부 정보 페이지 구성 요소를 만듭니다.

src에 Detail.vue 파일을 만듭니다. /views 디렉터리에 다음 코드를 추가합니다.

<template>
  <div class="detail">
    <h1>电影详情页</h1>
    <p>电影名称：{{ movie.name }}</p>
    <p>导演：{{ movie.director }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      movie: {
        name: '复仇者联盟',
        director: '乔·罗素'
      }
    }
  }
}
</script>

3. 라우팅 구성

main.js에서 home 및 세부 구성 요소를 소개하고 라우팅을 구성합니다.

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import Detail from './views/Detail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/detail',
    name: 'detail',
    component: Detail
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

4 프로젝트를 실행합니다.

다음에서 npm runserv 명령을 실행합니다. 명령줄을 사용하여 프로젝트를 시작한 다음 브라우저에서 http://localhost:8080을 방문하여 홈페이지를 확인하세요.

"영화 세부정보 보기" 버튼을 클릭하면 영화 세부정보 페이지로 이동하여 영화 이름과 감독이 표시됩니다.

3. Notes

1. 기록 모드 사용

VueRouter 인스턴스를 생성할 때 모드를 기록 모드로 설정하면 URL에서 # 기호를 제거하여 URL을 더 아름답게 만들 수 있습니다.

const router = new VueRouter({
  mode: 'history',
  routes
})

2. 동적 라우팅

Vue-router를 사용하면 동적 라우팅을 사용하여 보다 유연한 페이지 점프를 달성할 수 있습니다. 예를 들어 라우팅 매개변수를 통해 영화 ID를 전달하여 영화 세부정보 페이지에서 해당 영화에 대한 자세한 정보를 렌더링할 수 있습니다.

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail
  }
]

// 传递参数
this.$router.push('/detail/123')

// 获取参数
this.$route.params.id

3. 중첩 라우팅

Vue-router는 구성 요소 내부에 다른 구성 요소를 로드하여 보다 복잡한 페이지 구조를 구현할 수 있는 중첩 라우팅을 지원합니다. 예를 들어 영화 세부정보 페이지에 리뷰 구성요소를 로드할 수 있습니다.

// 路由配置
const routes = [
  {
    path: '/detail/:id',
    name: 'detail',
    component: Detail,
    children: [
      {
        path: 'comment',
        component: Comment
      }
    ]
  }
]

위는 프로젝트에서 Vue-router의 사용과 주의사항입니다. 경로와 구성 요소를 구성하면 페이지 간 새로 고침 없는 이동을 달성하고 사용자 경험을 향상할 수 있습니다. 동시에 Vue-router는 동적 라우팅과 중첩 라우팅도 지원하므로 더 풍부하고 복잡한 프런트엔드 애플리케이션을 구축할 수 있습니다. 이 글이 Vue-router를 이해하고 사용하는 데 도움이 되기를 바랍니다!

위 내용은 프로젝트에서의 Vue-router 사용 및 주의사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!