Vue 라우터를 사용한 리디렉션 및 별칭
6899 단어 programmingjavascriptvuewebdev
지금 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.)
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
});
<!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>
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
});
<!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>
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.)
Reference
이 문제에 관하여(Vue 라우터를 사용한 리디렉션 및 별칭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aumayeung/redirect-and-alias-with-vue-router-53b6텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)