Vue Router Basics

General Term 

Project 안의 package.json 에 아래와 같은 dependency item 이 있는데 아래와 같은 의미를 갖는다..

"vue-router": "^3.0.1",

use the latest version of vue-router that is compatible with version 3.0.1 of the Vue-Router.

Vue-Router 버전 3.0.1과 호환되는 최신 버전의 vue-router를 사용하세요.

 

<router-link>

component (from the vue-router library) whose job is to link to a specific route.

특정 경로에 연결하는 작업을 수행하는 component ( from vue-router 라이브러리의)입니다.

 

<router-view/>

a placeholder where the contents of our component will be rendered onto the page.

component 의 내용이 페이지에 렌더링될 자리입니다.

 

Using named route

Another way we can create router links is by using named routes.

라우터 링크를 생성할 수 있는 또 다른 방법은 명명된 경로를 사용하는 것입니다.

 

    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

we can write it to named roue

    <router-link :to="{ name: 'home' }">Home</router-link> |
    <router-link :to="{ name: 'about' }">About</router-link>

 

benefit

If we want to change the path of a route, if we’re using named routes we’d only have to change that path in one place instead of everywhere in our app.

경로의 경로를 변경하고 싶다면, named route를 사용하는 경우 앱의 모든 곳이 아닌 한 곳에서만 해당 경로를 변경하면 됩니다.

 

Redirect & Alias

Problem: Changing Routes

Sometimes in our applications, after we ship them to production we need to change their
paths. Like from /about to /about-us.  How might we deal with this?

때로는 애플리케이션에서 프로덕션 환경으로 deploy한 후 path 를 변경해야 하는 경우도 있습니다.

 

Solution #1:Redirect

 

The first step is to change our original route.

    const router = new VueRouter({
      routes: [
        ...
        {
          path: '/about-us',
          name: 'about',
          component: About
        }
      ]
    })

Since there might be links around the internet to our /about page, we want to make that redirect from /about to /about-us, with the following additional route.

인터넷에 이미 bookmark 된/about 링크가 있을 수 있으므로  /about 경로를 추가함으로  /about을 /about-us로 리디렉션 합니다.

 

    const router = new VueRouter({
      routes: [
        ...
        { 
          path: '/about', 
          redirect: { name: "about" }  // this is using the named route
        }
      ]
    })

 

 

Solution #2:Alias

 

just provide a duplicate path to the same content. 

동일한 콘텐츠에 대한 중복 경로를 제공하기만 하면 됩니다.

    const router = new VueRouter({
      routes: [
        ...
        {
          path: '/about-us',
          name: 'about',
          component: About,
          alias: '/about' // <-----
        }
      ]
    })​

Now the user can go to /about or /about-us and they’ll get the same content.

이제 사용자는 /about 또는 /about-us로 이동하여 동일한 콘텐츠를 얻을 수 있습니다.

 

 

 

Problem: Complex Routes 

In order to view an event we go to /event/123. Some might prefer this URL to be /events/123, the plural.

이벤트를 보려면 /event/123으로 이동합니다. 어떤 사람들은 이 URL을 복수형인 /events/123으로 선호할 수도 있습니다.

 

Let's ensure that all our old URLs redirect properly to the new URL.

모든 이전 URL이 새 URL로 올바르게 리디렉션되는지 확인하겠습니다.

old URL 로 접근을 하여도 new URL 로 자동으로 리디렉션일 되도록 한다.

 

 

Solution :Redirecting Dynamic Segments

To redirect a dynamic segment, we’ll need to get access to the params when we create the new path.

동적 세그먼트를 리디렉션하려면 새 경로를 생성할 때 매개변수에 액세스해야 합니다.

 

need to send in an anonymous function into the redirect property.

리디렉션 속성에 익명 함수를 보내야 합니다.

 

/src/router/index.js

 

...
const routes = [
  ...
  {
    path: '/events/:id', // <--- make plural 'events'
    name: 'EventDetails',
    ...
  },
  {
    path: '/event/:id',
    redirect: to => {
      return { name: 'EventDetails', params: { id: to.params.id } }
    }
  },

we can simplify what we wrote above, because the id param will get passed along automatically. Vue Router is smart like this:

id 매개변수가 자동으로 전달되므로 위에서 작성한 내용을 아래와 같이 익명함수를 사용하지 않고, 단순화할 수 있다.

{
    path: '/event/:id',
    redirect: () => {
      return { name: 'EventDetails' }
    }
},

 

 

Solution :Redirect with children

redirect 도 children 을 받아들일 수 있다.

 {
    path: '/event/:id',
    redirect: () => {
		return { name: 'EventDetails' }
	},
    children: [
      { path: 'register', redirect: () => ({ name: 'EventRegister' }) },
      { path: 'edit', redirect: () => ({ name: 'EventEdit' }) }
    ]
  },

 

 

Solution :Redirect with Wildcard

{
    path: '/event/:afterEvent(.*)',
    redirect: to => {
      return { path: '/events/' + to.params.afterEvent }
    }
  },

This is taking whatever comes after the matching word /event/ and placing it after /events/ .

이는 일치하는 단어 /event/ 뒤에 오는 모든 것을 가져와 /events/ 뒤에 배치하는 것입니다.

 

 

시작하기 | Vue Router

Sample Codes

https://github.com/Code-Pop/Touring-Vue-Router/tree/L5-end

GitHub - Code-Pop/Touring-Vue-Router