vue-router의 기본 옵션 작동 방식

vue-router의 기본 옵션 작동 방식

기본 옵션 문서로서:

앱의 기본 URL입니다.예를 들어, 단일 페이지 애플리케이션 전체가 /app/로 처리되는 경우, base는 "/app/" 값을 사용해야 합니다.

하지만 다음과 같이 시도해보니 효과가 없는 것 같습니다.

const router = new VueRouter({
  base: "/app/",
  routes
})

데모를 하다.

베이스의 디폴트치는 다음과 같습니다.'/'. 라우팅에 사용되는 방법에서 유추:

<router-link to="home">Home</router-link>

또는

<router-link :to="{ path: '/abc'}" replace></router-link>

그냥 생략했어요./app효과가 있습니다.베이스는, E-메일 베이스의 일부일 필요는 없습니다.router-link

편집

사용방법base에vue-router

(이 테스트에서는,vue-cli와 함께webpack템플릿)을 참조해 주세요.

라우터 구성은 다음과 같습니다.

export default new Router({
  base: '/app',
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'RangeInputDemo',
      component: ComponentDemo
    }
  ]
})

베이스 추가'/app'베이스가 아직 설정되어 있는 것처럼 프로젝트 전체에서 발생한 라우팅에는 차이가 없습니다.'/'.

---

서버측에서 URL(프로젝트가 서비스되고 있는 URL)을 변경하려고 했습니다.

그래서...dev-server.js여기서:

var uri = 'http://localhost:' + port 

앱의 URL을 제어하기 위해 다음과 같이 약간 수정했습니다.

var uri = 'http://localhost:' + port + '/app'

이것에 의해, 애플리케이션에는 다음과 같이 표시됩니다.

주의:fullPath존재'/'vue 콘솔(두 번째 이미지)에 표시됩니다.

다시 한 번 확인해보기 위해, 저는 그 번호를 바꿨습니다.base로.'/'다시.

---

그래서...base의 특성router서버가 다른 경로로 애플리케이션을 서비스하는 경우 기본 URL을 서버에 의해 설정된 대로 설정합니다.'/'그 다음에base는, 설정 URL 로부터 애플리케이션을 실행하는 경우에 사용할 수 있습니다.

---

이 질문에서는 루트를 이동시킬 필요가 있기 때문에/app제 생각에는/app이 경우 서버가 서비스를 제공하는 루트를 변경하지 않을 경우 부모 루트가 해결책이 됩니다.

같은 문제가 발생했을 경우, 「base」설정이 기능하지 않습니다.회피책은 라우터의 base URL을 갱신하는 것입니다.

{ name: 'listings', path: baseUrl + '/listings',   component: PageListings}

루트를 이름으로 나타냅니다.

<router-link :to="{ name: 'listings' }" exact>Listings</router-link>

Vue Router 4에서는 history api별로 기본 경로를 설정합니다.

 const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

그러면 각 경로 앞에 process.env가 붙습니다.베이스_URL

베이스 패스에 다른 루트로 리다이렉트를 작성했습니다.

 {
    name: "Default",
    path: '/',
    redirect: { name: 'OtherRouteName' }
 }

참고 자료: https://next.router.vuejs.org/guide/essentials/redirect-and-alias.html

언급URL : https://stackoverflow.com/questions/42664712/how-base-option-works-in-vue-router