Vue : Dynamic Routing & History Mode

we’ll cover the creation of dynamic routes and how to use HTML5 History Mode to get rid of that # in our URL.

dynamic routes 생성과 HTML5 History Mode 를 사용하여 URL에서  #을 제거하는 방법을 다룰 것입니다.

 

Problem: How to create dynamic routes like /users/gregg or /users/jinha? 

   Solution: Dynamic Routes

   {
      path: '/event/:id',
      name: 'event-show',
      component: EventShow,
      props: true
    },

 

 

the path has /user/:username. :username is called a dynamic segment.

경로에는 /user/:username이 있습니다. :username을 동적 세그먼트라고 합니다.

 

    export default new Router({
      routes: [
        ...
        {
          path: '/user/:username',
          name: 'user',
          component: User
        }
      ]
    })

 

    <template>
      <div class="user">
        <h1>This is a page for {{ $route.params.username }}</h1>
      </div>
    </template>

 

 

A $route object represents the state of the current active route.

$route 객체는 현재 활성 경로의 상태를 나타냅니다.

 

https://router.vuejs.org/api/

API Reference | Vue Router

 

 

Using Props for Routes

Using $route.params in your component limits its flexibility. A more modular way to create your dynamic components is to set props: true in your route configuration

component 에서 $route.params를 사용하면 유연성이 제한됩니다. 
dynamic components를 만들기 위한  보다 모듈화된 방식은  경로 구성에서 set props을 true로 하는 것입니다.

 

    ...
    export default new Router({
      routes: [
        {
          path: "/user/:username",
          name: "user",
          component: User,
          props: true   // The $route.params is sent into your component as a normal prop.
        }
      ]
    });

 

<template>
      <div class="user">
        <h1>{{ username }}</h1>
      </div>
</template>
    
    <script>
    export default {
      props: ["username"]
    };
    </script>

 

Everything will now work the same, except that our component can now be reused as a child component elsewhere, passing in username as a prop.

이제 모든 구성 요소가 다른 곳에서 하위 구성 요소로 재사용되어 사용자 이름을 prop으로 전달할 수 있다는 점을 제외하면 모든 것이 동일하게 작동합니다.

 

The Hash

http://localhost:8080/#/about-us

“Hash mode” is the default mode for Vue Router and it uses the URL hash to simulate a full URL so the page isn’t reloaded every time the URL changes.

"Hash mode"는 Vue Router의 기본 모드이며 URL 해시를 사용하여 전체 URL을 시뮬레이션하므로 URL이 변경될 때마다 페이지가 다시 로드되지 않습니다.

 

Problem: I don’t want the hash

most websites don’t use this.

Solution: History mode + server configuration

    ...
    export default new Router({
      mode: 'history', // <----
      routes: [
       ...
      ]
    })

 

Tell Vue to use the browser history.pushState API to change the URL without reloading the page.

페이지를 다시 로드하지 않고 URL을 변경하려면 브라우저의 History.pushState API를 사용하도록 Vue에 지시하세요.

 

Normally when you load up /about-us on a server it would look for an about-us.html file. On our application no matter what URL is called up, we must load up index.html which is where our application is loaded, and then our router will take over and load up the proper page. 

일반적으로 서버에 /about-us를 로드하면 about-us.html 파일을 찾습니다. 우리 애플리케이션에서는 어떤 URL이 호출되든 애플리케이션이 로드되는 곳인 index.html을 로드해야 합니다. 그러면 라우터가 인계받아 적절한 페이지를 로드합니다.

 

This is already the default functionality on our development server, but if we go to deploy our application we’ll need to ensure our server has the proper configuration to serve up our index.html no matter what route is navigated to.

The Vue Router documentation has a bunch of example configurations showing how to do this.

이는 이미 개발 서버의 기본 기능입니다.하지만 애플리케이션을 배포하려면 어떤 경로로 이동하든 index.html을 제공할 수 있도록 서버가 적절한 구성을 갖추고 있는지 확인해야 합니다. Vue Router 문서에는 이를 수행하는 방법을 보여주는 여러 가지 예제 구성이 있습니다.

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

HTML5 History Mode | Vue Router

history.pushState API is only supported in IE10+, That's the reason history isn't the default.

 

Caveat: Handling 404s

A side effect of this you should be aware of is that when we go to an invalid URL, we are no longer given the proper 404 file not found error. 

이에 대해 알아야 할 side effect은 잘못된 URL로 이동해도 더 이상 적절한 404 파일을 찾을 수 없다는 오류가 표시되지 않는다는 것입니다.

There are different ways to combat this, one of which is by creating a /views/FileNotFound.vue component

이 문제를 해결하는 방법에는 여러 가지가 있습니다. 그 중 하나는 /views/FileNotFound.vue 구성 요소를 만드는 것입니다.

 

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

 

There’s More

• nested routes, 
• transition effects, 
• programmatic navigation, 
• passing props to routes, 
• and SEO concerns

Our Example Application

https://github.com/Code-Pop/real-world-vue/releases/tag/lesson5-dynamic-routing-finish

Release lesson5-dynamic-routing-finish · Code-Pop/real-world-vue