Vuejs에서 기본 라우터보기 외의 구성 요소를 렌더링하는 방법

vue-router를 사용하여 페이지를 탐색하는 vue 응용 프로그램이 있습니다.Vuejs에서 기본 라우터보기 외의 구성 요소를 렌더링하는 방법

내 app.vue은 간단하다 :

export default new Router({ 
    routes: [ 
    { 
     path: '/', 
     name: 'Home', 
     component: Home 
    }, { 
     path: '/page1', 
     name: 'Page1', 
     component: Page1 
    }, { 
     path: '/page2', 
     name: 'Page2', 
     component: Page2 
    } 
    ] 
})

응용 프로그램을 사용하는 URL이 지금

localhost:8080/#/  -> Home 
localhost:8080/#/page1 -> Page1 
localhost:8080/#/page2 -> Page2

문제입니다 :

<template> 
    <div id="app"> 
    <main-header/> 
    <router-view/> 
    </div> 
</template> 

<script>...</script> 
<style>...</style>

페이지는 VUE 라우터를 사용하여 렌더링됩니다 다른 페이지를 만들고 싶습니다. Login.vue은 vue-router에서 사용하지 않고 다음과 같이 액세스합니다 : localhost:8080/ 또는 localhost:8080/login 인증에 성공하면 위에서 설명한대로 기본 URL 라우팅으로 돌아갑니다. 예를 들어 localhost:8080/login으로 갈 때 App.vue이 렌더링되지 않습니다. 가능합니까?

어떻게하면됩니까? 이것은 당신이 달성하려고하는 것입니다 경우

출처

2017-11-24 wrahim

여기에서 해결하려는 유스 케이스는 무엇입니까? – Saurabh

나는 vue-router를 사용하는 응용 프로그램을 가지고 있는데, vue-router가 사용하지 않는 응용 프로그램의 로그인 페이지 ('login.vue')가 필요하고'#' – wrahim

는 잘 모르겠지만,이 같은 주요 구성 요소 템플릿에 내 섹션에 구성 요소를 v-if를 사용하여 로그인 페이지에 대한 라우터를 사용하여 그것을 어떻게이 있습니다 :

<template> 
    <body class="my-theme"> 
     <div class="wrapper"> 
      <app-header v-if="authenticated"></app-header> 
      <main-sidebar v-if="authenticated"></main-sidebar> 
      <router-view></router-view> 
      <app-footer v-if="authenticated"></app-footer> 
     </div> 
    </body> 
</template> 

<script> 

    import AppHeader from './components/sections/AppHeader' 
    import AppFooter from './components/sections/AppFooter' 
    import MainSidebar from './components/sections/MainSidebar' 

export default { 
    name: 'app', 
    props: { 
     authenticated: { 
     type: Boolean, 
     required: true 
     } 
    }, 
    components: { 
    AppHeader, 
    AppFooter, 
    MainSidebar 
    } 
} 
</script>

출처

2017-11-25 13:07:46 NimaAJ

Vuejs에서 기본 라우터보기 외의 구성 요소를 렌더링하는 방법

답변

관련 문제