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

6899 단어 programming javascript vue webdev

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에 대한 일반적인 규칙을 따르고 싶지 않을 때 유용합니다.

Reference

이 문제에 관하여(Vue 라우터를 사용한 리디렉션 및 별칭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/redirect-and-alias-with-vue-router-53b6

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JavaScript의 프로토타입 및 상속

5가지 연습으로 2021년 CSS 그리드 모델 에이싱 || CSS 2021 🔥

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다