vue-route 경로 관리 설치 및 설정 방법

소개 하 다.Vue Router은Vue.js공식 경로 관리자 이다.이 는Vue.js의 핵심 깊이 와 통합 되 어 단일 페이지 응용 을 손바닥 뒤 집 듯 이 쉽게 만 들 었 다.포 함 된 기능 은:

포 함 된 경로/도표

모듈 화 된 구성 요소 기반 경로 설정

경로 파라미터,조회,어댑터

Vue.js 과도 시스템 을 바탕 으로 하 는 보기 과도 효과

입자 도 내 비게 이 션 제어

자동 으로 활성 화 된 CSS class 링크

HTML 5 과거 기록 모드 또는 hash 모드,IE9 에서 자동 으로 강등

사용자 정의 스크롤 바 행동

설치 하 다.
설치 명령

npm install vue-router --save

모듈 화 된 프로젝트 에서 사용 하려 면Vue.use()을 통 해 경로 기능 을 명확 하 게 설치 해 야 합 니 다.

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

Vue.use(VueRouter)

모듈 화 사용

이전에 비계vue-cli를 사용 하여 프로젝트 를 만 들 었 을 때 실제 설정router이 되 었 습 니 다.프로젝트 를 만 든 후에 프로젝트 루트 디 렉 터 리 아래 에router폴 더 가 있 습 니 다.router다음 에index.js파일 이 있 습 니 다.내용 은 다음 과 같 습 니 다.

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

// 1.             ，     Vue.use    
Vue.use(VueRouter);

// 2.     ，            
const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About
  },
];

// 3.   router  
const router = new VueRouter({
  //               
  routes,  // (  )     routes: routes
});

// 4.   router  ，   main.js   
export default router;

이 파일 은 경로 설정 입 니 다.마지막 으로router대상 을 내 보 낸 후 프로젝트main.js에서 참조 하면 됩 니 다.

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

Vue.config.productionTip = false;

new Vue({
  router,  //  vue     router  ，        
  render: (h) => h(App),
}).$mount("#app");

우리 의 2 개의 구성 요소 코드About와Home코드 는 다음 과 같다.

// About.vue
<template>
  <div class="about">
    <h1>About</h1>
  </div>
</template>

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

<style scoped>
</style>

// Home.vue
<template>
  <div class="home">
    <h1>Home</h1>
  </div>
</template>

<script>

export default {
  name: "Home",
};
</script>

<style scoped>
</style>

마지막 으로 우 리 는App.vue에 다음 과 같은 코드 를 기록 합 니 다.

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

<style lang="scss">
</style>

<router-link>을 사용 하여 링크 를 불 러 온 다음to을 사용 하여 점프 하 는 링크 를 표시 합 니 다.최종 적 으로<router-link>라벨 로 렌 더 링 합 니 다.<a>은 도로 의 출구,즉 해당<router-view>의 코드 가 이곳 에 렌 더 링 될 것 이다.
HTML 5 history 모드
그러나 우리 가 프로그램 을 시작 하고 페이지 를 방문 할 때url주소 에 나타 납 니 다url
이것 은#기본vue-router모드 인hash의URL를 사용 하여 완전한hash을 모 의 하기 때문에URL이 바 뀌 었 을 때 페이지 를 다시 불 러 오지 않 습 니 다.
만약 에 못 생 긴URL을 원 하지 않 는 다 면 우 리 는 경로 의hash모델 로 페이지 를 다시 불 러 올 필요 가 없 이history점프 를 완성 할 수 있다.

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

우 리 는history.pushState API폴 더 아래URL에router를index.js로 추가 하면 된다.그 후에 다시 방문 하면mode번 호 는 없 을 것 이다history.
메모:http://localhost:8080/모드 는 배경 설정 지원 이 필요 합 니 다.Google 의 애플 리 케 이 션 은 단일 페이지 클 라 이언 트 애플 리 케 이 션 이기 때문에 배경 에 정확 한 설정 이 없 으 면 사용자 가 브 라 우 저 에서 다른#주 소 를 직접 방문 하면 404 로 돌아 갑 니 다.이것 은 보기 싫 습 니 다.
따라서 서버 에 모든 상황 을 덮어 쓰 는 후보 자원 을 추가 해 야 합 니 다.history정적 자원 이 일치 하지 않 으 면 같은url페이지 로 돌아 가 야 합 니 다.이 페이지 는 바로 당신URL이 의존 하 는 페이지 입 니 다.
vue-route 경로 관리 에 관 한 설치 와 설정 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 vue route 설치 와 설정 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!