Vue.js两种不同的主要布局

Question

我使用的vue.js版本2.5.13安装了vue-cli，使用webpack-模板。

现在，我想对我所有的公共页面使用生成的App.vue-模板，为我的所有管理路线使用另一个模板AdminApp.vue。

我的路由器/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-模板，而是使用App.vue-模板。如果我刷新这个页面，它就会正常工作。

你知道为什么吗？对于不同的路由使用两个或多个不同的模板，是否有一些最佳实践？

Answer 1

简介：

您应该以layouts.For为例，layout1 & layout2。然后，您应该将它们定义为main.js中的全局组件，最后将它们与v一起使用-如果在app.vue中取决于您的条件。

及其详细信息：

首先是路由器/index.js：

    {
    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"/>

Ok.All做好了！

现在我们有两种布局。