Vue 라우팅 리디렉션과 별칭의 차이점 설명
리디렉션도 루트 설정을 통해 이루어집니다. 다음 예는/a에서/b로 리디렉션하는 것입니다.
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
방향을 바꾸는 대상은 이름이 지정된 경로가 될 수도 있습니다.
const router = new VueRouter({
routes: [
{ path: '/a', redirect: '/b' }
]
})
심지어 동적으로 목표를 다시 정하는 방법도 있다.
const router = new VueRouter({
routes: [
{ path: '/a', redirect: to => {
//
// return /
}}
]
})
주의내비게이션 가드는 점프 루트에 적용되지 않고 목표에만 적용된다.다음 예에서/a 루트에 before Each나 before Leave 수위를 추가하는 것은 아무런 효과가 없습니다.기타 고급 사용법은 참조예제.
별칭
사용자가/a에 접근하면 URL이/b로 바뀌고 루트가/b로 일치한다는 뜻입니다. 그러면 별명은 무엇입니까?
/a의 별명은/b입니다. 사용자가/b에 접근할 때 URL은/b로 유지되지만 루트가 일치하는 것은/a입니다. 사용자가/a에 접근하는 것과 같습니다.
위의 라우팅 구성은 다음과 같습니다.
const router = new VueRouter({
routes: [
{ path: '/a', component: A, alias: '/b' }
]
})
'별칭'기능은 UI 구조를 임의의 URL에 자유롭게 비추도록 합니다. 설정에 제한된 플러그인 루트 구조가 아니라.보충 지식: vue-router 리디렉션과 별명alias의 용법 구분
vue-router는 vue 프레임워크의 중요하고 자주 사용하는 플러그인 중 하나로 단일 페이지 응용 경로 패키지 관리에 사용됩니다.프로젝트에서'페이지 가짜 동작'을 하기 위해redirect와alias를 자주 사용합니다.
리디렉션
말 그대로 이 속성은 페이지로 이동하는 경로를 재정의하는 데 사용됩니다.간단하게 말하면 하나의 루트를 설정하였는데, 그것은 자신의 경로가 있지만, 방향을 바꾸어 다른 루트로 이동한다.
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component:HelloWorld
},
{
path:'/gohome',
redirect:'/'
}
]
})
예를 들어'/gohome'의 루트 결과가'/'루트 디렉터리 루트로 넘어가면 최종 결과는 두 루트가 표시하는 페이지의 내용이 완전히 일치하는 것이다.참고: 브라우저 주소 표시줄을 포함하는 루트의 원래 경로도 방향을 바꾸는 경로로 바뀝니다!
별명
사실은 어떤 경로에'꽃 이름'인 새로운 경로를 추가해서 어떤 경로에 적용되든지 최종적으로 같은 경로의 페이지 내용을 표시하도록 하는 것이다.예:
export default new Router({
routes: [
{
path:'/hi1',
component:hi1,
alias:'/Jsxj'
}
]
})
위와 같이 별명alias 경로를 가리키는'router-link'는 path 경로의 루트 페이지로 이동합니다. 최종적으로 두 경로 모두 같은 페이지 내용을 표시합니다.그러나 방향을 바꾸는 것과 다른 점은 브라우저 주소 표시줄이alias의 경로가 변동되지 않는다는 것입니다!이것은 아마도 고객들이 왕왕 더 보고 싶은 것일 것이다.
또한 매개변수가 있는 대상 라우트를 재정의할 때 해당 라우트의 경로에서 매개변수 이름은 대상 라우트 매개변수 이름과 일치해야 해당 매개변수 값을 대상 라우트에 전달할 수 있습니다.
위의 이 Vue 루트 재정의와 별명의 차이점은 바로 편집자가 여러분에게 공유한 모든 내용을 설명하는 것입니다. 여러분에게 참고가 될 수 있고 저희를 많이 사랑해 주시기 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Vue Render 함수로 DOM 노드 코드 인스턴스 만들기render에서createElement 함수를 사용하여 DOM 노드를 만드는 것은 직관적이지 않지만 일부 독립 구성 요소의 디자인에서 특수한 수요를 충족시킬 수 있습니다.간단한 렌더링 예는 다음과 같습니다. 또한 v...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.