Vue 라우터를 사용한 리디렉션 및 별칭

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vue.js는 대화형 프론트 엔드 앱을 개발하는 데 사용할 수 있는 사용하기 쉬운 웹 앱 프레임워크입니다.

Vue 라우터는 URL을 구성 요소에 매핑하는 URL 라우터입니다.

이 기사에서는 경로에 리디렉션과 별칭을 추가하는 방법을 살펴보겠습니다.

리디렉션


redirect 속성을 경로에 추가하여 한 경로에서 다른 경로로 리디렉션을 추가할 수 있습니다.

예를 들어 다음과 같이 리디렉션을 추가할 수 있습니다.
src/index.js :

const Bar = { template: "<div>bar</div>" };  
const routes = [  
  { path: "/foo", redirect: "/bar" },  
  { path: "/bar", component: Bar }  
];

const router = new VueRouter({  
  routes  
});

new Vue({  
  el: "#app",  
  router  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="[https://unpkg.com/vue/dist/vue.js](https://unpkg.com/vue/dist/vue.js)"></script>  
    <script src="[https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js)"></script>  
  </head>  
  <body>  
    <div id="app">  
      <router-view></router-view>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>


그런 다음 브라우저에서 /#/bar로 이동하면 bar가 표시됩니다.

리디렉션은 명명된 경로를 대상으로 할 수도 있습니다. 예를 들어 다음과 같이 작성할 수 있습니다.
src/index.js :

const Bar = { template: "<div>bar</div>" };  
const routes = [  
  { path: "/foo", redirect: { name: "bar" } },  
  { path: "/bar", component: Bar, name: "bar" }  
];

const router = new VueRouter({  
  routes  
});

new Vue({  
  el: "#app",  
  router  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="[https://unpkg.com/vue/dist/vue.js](https://unpkg.com/vue/dist/vue.js)"></script>  
    <script src="[https://unpkg.com/vue-router/dist/vue-router.js](https://unpkg.com/vue-router/dist/vue-router.js)"></script>  
  </head>  
  <body>  
    <div id="app">  
      <router-view></router-view>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>


그러면 우리는 같은 결과를 얻습니다.
redirect 속성을 함수로 설정할 수도 있습니다. 예를 들어 다음과 같이 경로를 반환하는 함수로 설정할 수 있습니다.
src/index.js :

const Bar = { template: "<div>bar</div>" };  
const routes = [  
  { path: "/foo", redirect: to => "bar" },  
  { path: "/bar", component: Bar }  
];

const router = new VueRouter({  
  routes  
});

new Vue({  
  el: "#app",  
  router  
});


그런 다음 이전 예제와 동일한 결과를 얻습니다.

탐색 가드는 리디렉션되는 경로에 적용되지 않고 대상에만 적용됩니다.

별명



리디렉션은 사용자가 /foo를 방문할 때 URL이 /bar로 바뀌고 /bar로 일치됨을 의미합니다.
/foo 의 별칭 수단이 /bar 로 설정되어 있다는 것은 사용자가 /bar 를 방문할 때 URL이 /bar 로 유지되지만 사용자가 방문하는 것처럼 /foo 일치한다는 의미입니다.

예를 들어 다음과 같이 별칭이 있는 경로를 정의할 수 있습니다.
src/index.js :

const Foo = { template: "<div>foo</div>" };  
const routes = [{ path: "/foo", component: Foo, alias: "/bar" }];

const router = new VueRouter({  
  routes  
});new Vue({  
  el: "#app",  
  router  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>  
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  </head>  
  <body>  
    <div id="app">  
      <router-view></router-view>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>


그런 다음 foo 또는 /#/foo 로 이동할 때 /#/bar 를 얻습니다.

별칭을 사용하면 경로의 중첩 구조에 제약을 받지 않고 모든 경로를 URL에 매핑할 수 있습니다.

이것은 중첩된 경로에 대해 원하는 URL을 매핑하는 데 유용합니다.

예를 들어 다음과 같이 중첩 경로에 대한 별칭을 정의하는 경우:
src/index.js :

const Foo = {  
  template: `<div>  
    foo  
    <router-view></router-view>  
  </div>`  
};  
const Bar = { template: "<div>bar</div>" };  
const routes = [  
  {  
    path: "/foo",  
    component: Foo,  
    children: [{ path: "/bar", component: Bar }]  
  }  
];

const router = new VueRouter({  
  routes  
});

new Vue({  
  el: "#app",  
  router  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>  
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>  
  </head>  
  <body>  
    <div id="app">  
      <router-view></router-view>  
    </div>  
    <script src="src/index.js"></script>  
  </body>  
</html>


그런 다음 /#/foobar 로 이동하면 다음을 얻습니다.

foobar


화면에 표시됩니다.
/#/foo/bar 로 이동해도 동일한 내용이 표시됩니다.

따라서 별칭을 사용하는 경우 중첩된 경로 URL에 대한 일반적인 규칙을 따를 필요가 없습니다.

결론



리디렉션 및 별칭은 Vue 라우터의 편리한 기능입니다.

리디렉션을 사용하면 한 경로에서 다른 경로로 리디렉션할 수 있습니다. 탐색 가드는 리디렉션 경로에서 실행되지 않습니다.

별칭을 사용하면 기존 경로에 대한 새 URL을 만들 수 있습니다. 경로 또는 별칭으로 이동할 때 경로를 별칭에 매핑할 때 동일한 결과를 얻습니다.

예를 들어 중첩된 경로 URL에 대한 일반적인 규칙을 따르고 싶지 않을 때 유용합니다.

좋은 웹페이지 즐겨찾기