Vue 라우터의 기본 구성 명령은 무엇입니까?

Vue의 Router는 페이지 점프 및 라우팅 관리를 위한 플러그인입니다. 다양한 URL 요청에 따라 다양한 구성요소를 로드하고 프런트엔드 라우팅 기능을 구현하는 데 도움이 될 수 있습니다. Vue의 Router를 사용하려면 기본 구성을 수행해야 합니다. 다음은 Vue Router의 기본 구성 명령을 자세히 소개하고 구체적인 코드 예제를 첨부합니다.

1. Vue Router 설치
   npm을 사용하여 Vue Router를 설치하고 터미널을 열고 프로젝트 디렉터리에서 다음 명령을 실행합니다.

   npm install vue-router

   로그인 후 복사

2. Import Vue Router
   main.js 파일에서 Vue Router를 가져오고 Vue를 사용합니다. .use 메소드 Vue용 플러그인으로 등록:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)

   로그인 후 복사

3. 라우팅 인스턴스 생성
   main.js 파일에서 라우팅 인스턴스 생성 및 라우팅 규칙 구성:

   import Vue from 'vue'
   import VueRouter from 'vue-router'
   import Home from './components/Home.vue'
   import About from './components/About.vue'
   
   Vue.use(VueRouter)
   
   const routes = [
     { path: '/', component: Home },
     { path: '/about', component: About }
   ]
   
   const router = new VueRouter({
     mode: 'history', // 使用HTML5的history模式，去除URL中的"#"
     routes
   })

   로그인 후 복사

4. 라우팅 인스턴스 마운트
   In the main.js 파일에 추가 라우팅 인스턴스가 Vue 인스턴스에 마운트됩니다.

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

   로그인 후 복사

5. 라우팅 아웃렛 구성
   Vue의 루트 구성 요소에서 태그를 사용하여 해당 경로에 해당하는 구성 요소를 표시합니다. :

   <template>
     <div>
    <router-view></router-view>
     </div>
   </template>

   로그인 후 복사

위 구성을 통해 Vue Router의 기본 구성이 완성되었습니다. 다음은 완전한 예입니다.

먼저 src/comComponents 디렉터리에 Home.vue 및 About.vue라는 두 개의 구성 요소를 만듭니다.

Home.vue 내용은 다음과 같습니다.

<template>
  <div>
    <h2>Welcome to Home Page</h2>
  </div>
</template>

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

About.vue 내용은 다음과 같습니다.

<template>
  <div>
    <h2>Welcome to About Page</h2>
  </div>
</template>

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

그런 다음 src/router 디렉터리에 다음 내용으로 index.js 파일을 만듭니다.

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

Vue.use(VueRouter)

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

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

export default router

마지막으로 src/main.js 파일 다음과 같이 구성합니다.

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

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

위는 Vue Router의 기본 구성 명령어와 코드 예시입니다. 이러한 구성을 통해 페이지 간 점프와 프런트엔드 라우팅 기능을 구현할 수 있습니다. 이 글이 Vue Router를 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 Vue 라우터의 기본 구성 명령은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!