반응형
Vuejs에서는 기본 라우터 뷰 이외의 컴포넌트를 렌더링하는 방법
vue-router를 사용하여 페이지를 탐색하는 vue 앱을 가지고 있습니다.
나의app.vue심플:
<template>
<div id="app">
<main-header/>
<router-view/>
</div>
</template>
<script>...</script>
<style>...</style>
페이지는 vue-router를 사용하여 렌더링됩니다.
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
문제:다른 페이지를 만들고 싶다Login.vuevue-timeout에서 사용되지 않고 다음과 같이 액세스됩니다.localhost:8080/또는localhost:8080/login인증이 성공하면 위의 설명과 같이 기본 URL 라우팅으로 돌아갑니다.에 갈 때localhost:8080/login예를 들어 없다App.vue렌더링, 가능합니까?
이거 어떻게 해?
이것이 당신이 달성하려고 하는 것인지 아닌지는 모르겠지만, 이것이 내가 로그인 페이지에 라우터를 사용하여 실행한 방법입니다.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>
언급URL : https://stackoverflow.com/questions/47479171/in-vuejs-how-to-render-a-component-outside-of-the-default-router-view
반응형
'programing' 카테고리의 다른 글
| Vue CLI 4.5.*: "export 'default'('Vue'로 Import됨)를 'vue'에서 찾을 수 없습니다. (0) | 2022.08.08 |
|---|---|
| Vuex에서 개체의 속성을 업데이트할 때 Getter가 반응하지 않음 (0) | 2022.08.08 |
| Vue에서 Vue를 사용하여 mapState를 사용하여 데이터를 가져올 수 없음 (0) | 2022.08.08 |
| 기호별 또는 크기별 유형이 아닌 "int"를 사용해야 할 때는 언제입니까? (0) | 2022.08.08 |
| Vue가 동적 구성 요소를 사용하여 Vuex에서 v-for의 항목을 업데이트하지 않음 (0) | 2022.08.08 |