Vue.js는 2개의 다른 메인 레이아웃

Vue.js는 2개의 다른 메인 레이아웃

webpack-template를 사용하여 vue-cli와 함께 설치된 vue.js 버전 2.5.13을 사용하고 있습니다.

이제 생성된 App.vue-template를 모든 공개 페이지에 사용하고 다른 템플릿을 모든 관리 경로에 사용합니다.

라우터/index.js는 다음과 같습니다.

import Vue from 'vue'
import Router from 'vue-router'
import LandingPage from '@/components/LandingPage'
import AdminDashboard from '@/components/admin/AdminDashboard'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'LandingPage',
      component: LandingPage
    },{
      path: '/admin/dashboard ',
      name: 'AdminDashboard',
      component: AdminDashboard
    }
}

main.js는 다음과 같습니다.

import Vue from 'vue';
import App from './App.vue';
import AdminApp from './AdminApp.vue';
import router from './router';
    
if (window.location.href.includes('/admin/')) {
  new Vue({
    el: '#app',
    router,
    components: {AdminApp},
    template: '<AdminApp/>'
  });
} else {
  new Vue({
    el: '#app',
    router,
    components: {App},
    template: '<App/>'
  });
}

이제 내가 가면localhost:8080/#/그 후 URL을 통해localhost:8080/#/admin/dashboard관리 패널은 AdminApp.vue-Template가 아닌 App.vue-Template를 사용합니다.이 페이지를 갱신하면 동작합니다.

왠지 알아?여러 루트에 대해 여러 개의 템플릿을 사용하기 위한 베스트프랙티스가 있나요?

개요:

레이아웃을 작성해야 합니다.예를 들어 layout1 및 layout2 입니다.그런 다음 main.js에서 글로벌 구성 요소로 정의하고 마지막으로 앱에서 v-if와 함께 사용해야 합니다.vue는 컨디션에 따라 달라집니다.

상세 내용:

router/index.first:

    {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/auth/login',
    name: 'login',
    meta:{layout:"auth"},
    component: Login
  },

어떤 첫 번째 루트를 통해 렌더링할 것인가admin layout그리고 둘째는 로 렌더링한다.Auth layout예를들면.자, 들어가겠습니다.main.js레이아웃을 컴포넌트로 정의합니다.

import Admin from './Layouts/Admin.vue'
import Auth from './Layouts/Auth.vue'
Vue.component('Admin',Admin);
Vue.component('Auth',Auth);

그런 다음 App.vue에서 경로에서 전달된 메타 데이터를 확인하여 어떤 레이아웃이 필요한지 탐지합니다.

   <Auth v-if="this.$route.meta.layout==='auth'"/>
   <Admin v-if="this.$route.meta.layout==null"/>

좋아, 다 끝났어!

이제 두 가지 레이아웃이 있습니다.

언급URL : https://stackoverflow.com/questions/48610349/vue-js-two-different-main-layouts