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

【问题标题】：Vue.js two different main LayoutsVue.js 两种不同的主要布局
【发布时间】：2018-07-14 14:06:28
【问题描述】：

我正在使用 vue.js 版本 2.5.13，使用 webpack-template 与 vue-cli 一起安装。

现在我想将生成的 App.vue-template 用于我的所有公共页面，并将另一个模板 AdminApp.vue 用于我的所有管理路由。

我的 router/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。如果我刷新此页面，它会起作用。

你知道为什么吗？是否有针对不同路线使用两个或多个不同模板的最佳做法？

【问题讨论】：

你能用小提琴演示一下吗？或分享你的回购？
main.js 是在每次路由更改时执行，还是仅在实际页面加载发生时执行？
你做错了，根据路径不需要有 2 个 vue 实例，Vue 路由器会为你处理。让我尝试按照您的代码为您创建一个示例。
这里，这会让你知道你应该怎么做jsfiddle.net/o4dup5gu/10
谢谢@Craig，我遇到了同样的问题，这在 2020 年对我有帮助。

标签： vue.js vuejs2 vue-component vue-router

【解决方案1】：

简介：

您应该进行布局。例如 layout1 和 layout2。然后你应该在你的 main.js 中将它们定义为全局组件，最后在你的 app.vue 中将它们与 v-if 一起使用，这取决于你的条件。

详细说明：

首先在 router/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"/>

好的，一切都完成了！

现在我们有两个布局。

【讨论】：