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:'/'
  }
 ]
})
Home|
goHome
예를 들어'/gohome'의 루트 결과가'/'루트 디렉터리 루트로 넘어가면 최종 결과는 두 루트가 표시하는 페이지의 내용이 완전히 일치하는 것이다.참고: 브라우저 주소 표시줄을 포함하는 루트의 원래 경로도 방향을 바꾸는 경로로 바뀝니다!
별명
사실은 어떤 경로에'꽃 이름'인 새로운 경로를 추가해서 어떤 경로에 적용되든지 최종적으로 같은 경로의 페이지 내용을 표시하도록 하는 것이다.예:

export default new Router({
 routes: [
  {
   path:'/hi1',
   component:hi1,
   alias:'/Jsxj'
  }
 ]
})
Hi1|
Jsxj
위와 같이 별명alias 경로를 가리키는'router-link'는 path 경로의 루트 페이지로 이동합니다. 최종적으로 두 경로 모두 같은 페이지 내용을 표시합니다.그러나 방향을 바꾸는 것과 다른 점은 브라우저 주소 표시줄이alias의 경로가 변동되지 않는다는 것입니다!이것은 아마도 고객들이 왕왕 더 보고 싶은 것일 것이다.
또한 매개변수가 있는 대상 라우트를 재정의할 때 해당 라우트의 경로에서 매개변수 이름은 대상 라우트 매개변수 이름과 일치해야 해당 매개변수 값을 대상 라우트에 전달할 수 있습니다.
위의 이 Vue 루트 재정의와 별명의 차이점은 바로 편집자가 여러분에게 공유한 모든 내용을 설명하는 것입니다. 여러분에게 참고가 될 수 있고 저희를 많이 사랑해 주시기 바랍니다.

좋은 웹페이지 즐겨찾기