Vue 라우터 - 전체 가이드

최초 발표nordschool.

If you are using Vue, the odds are you will need to deal with the Vue router. Let's go through all the common use-cases you will need! 👌

이 강좌에서 우리는mostessential 공유기 개념과 더 많은 advanced 모델을 소개할 것이다. 예를 들어 보호 루트와 애니메이션 루트 등이다.
준비 다 됐어요?우리 시작합시다!💪

개요

우리 먼저 대국을 보고 나서 깊이 파고들자.

프로젝트 구조

나는 vue 공유기의 다른 기능을 보여주기 위해 소형 vue 프로젝트를 만들었다.이 프로젝트는 vuecli를 사용하는 표준 설정을 가지고 있습니다.

├── README.md
├── babel.config.js
├── package.json
├── postcss.config.js
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.js
│   ├── router.js
│   └── views
│       ├── Animated.vue
│       ├── Dynamic.vue
│       ├── Guarded.vue
│       ├── Home.vue
│       ├── LazyLoaded.vue
│       ├── Login.vue
│       ├── Nested.vue
│       └── WithProps.vue
└── yarn.lock

우리는 주로 공유기를 처리할 것이다.하지만 다른 견해도 있다.
다음은 기본 라우터 구성의 모양입니다.

import Vue from 'vue';
import Router from 'vue-router';

// All the views
import Home from './views/Home.vue';
import Nested from './views/Nested.vue';
import Animated from './views/Animated.vue';
import Dynamic from './views/Dynamic.vue';
import Guarded from './views/Guarded.vue';
import Login from './views/Login.vue';
import WithProps from './views/WithProps.vue';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home,
      children: [
        {
          name: 'nested-home',
          path: 'nested',
          component: Nested
        }
      ]
    },
    {
      path: '/animated',
      component: Animated
    },
    {
      path: '/dynamic/:id',
      component: Dynamic
    },
    {
      path: '/login',
      component: Login
    },
    {
      path: '/very-secure',
      component: Guarded,
      beforeEnter: (to, from, next) => {
        let isAuthenticated;
        try {
          isAuthenticated = sessionStorage.getItem('authenticated');
        } catch (error) {
          return next({ path: '/login' });
        }

        return isAuthenticated ? next() : next({ path: '/login' });
      }
    },
    {
      path: '/with-props',
      component: WithProps,
      props: { newsletterPopup: true }
    },
    {
      path: '/lazy-loaded',
      name: 'lazyLoaded',
      // route level code-splitting
      // this generates a separate chunk (lazyLoaded.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () =>
        import(/* webpackChunkName: "lazyLoaded" */ './views/LazyLoaded.vue')
    }
  ]
});

다음은 Vue 응용 프로그램을 부트할 때 라우터를 추가하는 방법입니다.

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';

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

이제 이 공유기 설정의 모든 부분이 실제로 무엇을 했는지 깊이 파고들기 시작합시다.🧐

요소

도구를 사용하다

라우팅 구성의 예:

// src/router.js
{
  path: "/with-props",
  component: WithProps,
  props: { newsletterPopup: true }
}

라우터에서 도구를 쉽게 보려면 다음과 같이 하십시오.

// src/views/WithProps.vue
<template>
  <div class="home">
    <h1>This is a view with props coming from the router!</h1>
    <h2>Look at that - {{ $props.newsletterPopup }}</h2>
  </div>
</template>

<script>
export default {
  props: {
    newsletterPopup: Boolean
  }
};
</script>

일부 라우팅의 이름이 정의되어 있음을 알 수 있습니다.너는 이것들이 어떻게 일하는지 알고 싶니?

라우팅 이름 지정

라우팅 이름은 경로에 의존하지 않고 라우팅으로 이동하는 대체 방법을 제공합니다.
라우팅 구성의 예:

// src/router.js
{
  path: "/",
  component: Home,
  children: [
    {
      name: "nested-home",
      path: "nested",
      component: Nested
    }
  ]
}

다음은 어떻게 공유기 체인에서 그것을 사용합니까

<router-link :to="{ name: 'nested-home' }">Nested</router-link> |

이 가능하다, ~할 수 있다,..."응, 라우터 링크?😕"

라우터 링크

공유기 링크는 닻 링크처럼 내비게이션을 할 수 있지만 기능이 강하다.
엔진 뚜껑 아래에서, 그것은 정확한 href를 사용하여 닻 표시를 나타낸다.또한 대상 라우팅이 활성화되면 라우터 링크 구성 요소가 자동으로 CSS 클래스를 가져옵니다.
그것은 일반적인 닻 링크를 초과하는 공유기 링크를 고수하는 최선의 방법으로 여겨진다.
더 알고 싶으세요?너는 깊이 파고들 수 있다here.
너는 이미 이 공유기 보기의 일을 알아차렸다!

라우터 뷰

간단하게 말하면, 이것은 당신의 루트와 일치하는 구성 요소로 동적으로 대체되는 자리 차지 문자입니다.

<router-view></router-view>

다음은 Vue 문서의 공식 설명입니다.

The router-view component is a functional component that renders the matched component for the given path.

Components rendered in router-view can also contain its own router-view, which will render components for nested paths.

Any non-name props will be passed along to the rendered component, however most of the time the per-route data is contained in the route's params.

다음은 플러그인 루트에 대해 토론합시다...

네스트된 파이프라인

루트를 삽입해야 하는 용례가 있습니까?쉬웠어
노선에 대한 하위 항목을 정의할 수 있습니다.
라우팅 구성의 예:

// src/router.js
{
  path: "/",
  component: Home,
  children: [
    {
      name: "nested-home",
      path: "nested",
      component: Nested
    }
  ]
}

이것은 다른 중첩 루트가 있는 보기이기 때문에 공유기 보기이다

// src/views/Home.vue
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
    <router-view />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {
    HelloWorld
  }
};
</script>

중첩된 뷰 자체:

// src/views/Nested.vue
<template>
  <div class="about">
    <h1>This is a nested view, Helloww!</h1>
  </div>
</template>

동적 URL 세그먼트는요?예를 들어, 사용자 ID 또는 동적 필드가 있는 경우?

동적 라우팅 및 라우터 매개변수

동적 세그먼트가 있는 라우팅 구성 예: id

// src/router.js
{
  path: "/dynamic/:id",
  component: Dynamic
}

다음과 같이 어셈블리의 동적 매개변수에 액세스할 수 있습니다.

// src/views/Dynamic.vue
<template>
  <div>
    <h1>This is a very dynamic page, here is the id:</h1>
    <h2 class="highlight">{{ $route.params.id }}</h2>
    <span>Its almost like magic right?</span>
  </div>
</template>

<style lang="scss" scoped>
.highlight {
  font-weight: bold;
}
</style>

This is a good place to take a break! what about standing up & stretching ? Go for it! I will be here when you come back. 👍

선진적

자, 이제 모든 기초 지식을 알게 되었으니 좀 더 선진적인 것을 봅시다.

노선 수위

인증된 사용자만 볼 수 있는 보호 라우팅을 만드는 방법은 다음과 같습니다.

// src/router.js
{
  path: "/login",
  component: Login
},
{
  path: "/very-secure",
  component: Guarded,
  beforeEnter: (to, from, next) => {
    let isAuthenticated;
    try {
      isAuthenticated = sessionStorage.getItem("authenticated");
    } catch (error) {
      return next({ path: "/login" });
    }

    return isAuthenticated ? next() : next({ path: "/login" });
  }
}

// src/views/Guarded.vue
<template>
  <div class="about">
    <h1>This is a nested view, Helloww!</h1>
  </div>
</template>

// src/App.vue
methods: {
  authenticate() {
    sessionStorage.setItem("authenticated", true);
  },
  logout() {
    sessionStorage.removeItem("authenticated");
  }
}

이것은 단지 간단한 예시일 뿐입니다. 실제 응용 프로그램에 더 많은 검사층을 추가하기를 원할 수도 있습니다.😁

어댑터 노선

알 수 없는 라우팅을 캡처하기 위해 와일드카드 라우팅을 추가하는 방법은 다음과 같습니다.

{
  // will match everything
  path: '*';
  component: NotFound;
}

이 기술을 사용하여 404 페이지를 찾을 수 없습니다.💯

관찰 노선

노선 변경에 반응하려면 어떻게 해야 합니까?$route 객체에 특정 관찰자를 추가할 수 있습니다.

<script>
export default {
  watch: {
    $route(to, from) {
      console.log("to", to);
      console.log("from", from);
      // react to route changes...
    }
  }
};
</script>

기왕 우리가 이미 시작했으니, 우리는 루트 대상을 이야기합시다.

라우팅 객체

다음은 라우트 객체의 모양입니다.

interface RouteConfig = {
  path: string,
  component?: Component,
  name?: string, // for named routes
  components?: { [name: string]: Component }, // for named views
  redirect?: string | Location | Function,
  props?: boolean | Object | Function,
  alias?: string | Array<string>,
  children?: Array<RouteConfig>, // for nested routes
  beforeEnter?: (to: Route, from: Route, next: Function) => void,
  meta?: any,

  // 2.6.0+
  caseSensitive?: boolean, // use case sensitive match? (default: false)
  pathToRegexpOptions?: Object // path-to-regexp options for compiling regex
}

더 알고 싶으세요?보기docs.
당신은 더 특별한 용례가 있습니까?공유기 옵션을 어떻게 사용하는지 봅시다.

라우터 옵션

너는 자신의 취향에 따라 공유기를 맞춤형으로 만들 수 있다.
다음은 라우터를 초기화할 때의 구성 옵션입니다.

// src/router.js

new Router({
  mode: 'history', //  the router mode
  routes: [
      // Routes go here
  ],
  base: '/', // The base URL of the app
  linkActiveClass: 'router-link-active', // <router-link> default active class
  linkExactActiveClass: 'router-link-exact-active', // <router-link> default active class for exact matches
  scrollBehavior (to, from, savedPosition) {
    // native-like behavior when navigating with back/forward buttons
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }‚
  parseQuery: q => q, // custom query string parse
  fallback: true, // whether the router should fallback to hash mode
  });

문서에 대한 자세한 내용은 다음을 참조하십시오.

Router construction options .

Scroll behavior

I know this has been a long tutorial, stay with me we are almost done! 😌

라우터 변환

라우팅 어셈블리에 transitions effects 추가하시겠습니까?
Vue에 간단한 변환을 추가하는 것은 매우 쉽습니다. 변환 구성 요소에 구성 요소를 포장하기만 하면 됩니다.

// src/views/Animated.vue
<template>
  <transition name="fade">
    <div>
      <h1>This is a animated page, it fades away slowly...</h1>
    </div>
  </transition>
</template>


<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 2s;
}

.fade-enter,
.fade-leave-to {
  /* .fade-leave-active below version 2.1.8 */
  opacity: 0;
}
</style>

Vue 전환 및 애니메이션에 대한 추가 정보here를 읽을 수 있습니다.

로드 경로 지연

지연 로딩은 응용 프로그램의 성능을 향상시키는 유용한 기술이다.다음은 예입니다.

// src/router.js
{
  path: "/lazy-loaded",
  name: "lazyLoaded",
  // route level code-splitting
  // this generates a separate chunk (lazyLoaded.[hash].js) for this route
  // which is lazy-loaded when the route is visited.
  component: () =>
    import(/* webpackChunkName: "lazyLoaded" */ "./views/LazyLoaded.vue")
}

// src/views/LazyLoaded.vue
<template>
  <h1>This is a lazy-loaded view. Performance baby!</h1>
</template>

이렇게 하면 필요할 때만 불러오는 경로를 늦출 수 있습니다.동적 가져오기 문법 (src/router.js 코드 세그먼트에서 보듯이) 만 사용하면 됩니다.

내비게이션 해상도 흐름

공유기는 특정 순서에 따라 실행되는 서로 다른 연결고리를 가지고 있다.
이 연결의 순서를 이해하는 것이 매우 도움이 된다.이렇게 하면 논리가 정확한 시간, 정확한 위치에 있는지 확인할 수 있습니다.
이것은 매우 나쁘게 그려진 그림으로 공유기 연결의 실행 순서를 설명한다.

라우터 연결의 몇 가지 예:

글로벌 경계선을 갖고 싶다고?전 세계적으로 실행되는 2번 갈고리가 가장 좋은 선택일 수 있습니다.

구성 요소별 라우터 논리를 추가하시겠습니까?시작하기 전에 5번 갈고리를 보세요.

그렇습니다. 지금 당신은 Vue 공유기의 대가입니다!✋
지원
이 문장을 좋아합니까?트위터에 요약 라인을 공유합니다.


노드 학교
@ 노드 학교

Vue 라우터 - 전체 부트 스레드... - 도구 사용 라우팅 - 중첩 라우팅 - 동적 라우팅 - 라우팅 보호 - 와일드카드 라우팅 - 라우터 변환 - 로드 지연 라우팅 - 네비게이션 해석 라우터
13:29년 9월 27일 오후 50시
이.
이.
Better Code Monday 뉴스레터
너도 아마 나의 시사통신을 좋아할 것이다.우리의 생각은 매주 월요일에 3개의 웹 개발 힌트를 공유하는 것이다.
나의 목표는 나의 창작 기교를 향상시키고 가능한 한 많은 지식을 공유하는 것이다.지금까지 수백 명의 개발자만 구독했고 좋아하는 것 같다.
내가 어떤 것을 공유했는지 알아보려면 previous newsletter issues과subscribe를 보세요.