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

Question

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

现在我想将生成的 App.vue-template 用于我所有的公共页面，并为我的所有管理路由使用另一个模板 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-Template 而是 App.vue-Template。如果我刷新此页面，它会起作用。

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

亲切的问候，六甲

Answer 1

简单来说：

您应该进行布局。例如布局1 和布局2。然后你应该在 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"/>

好的，一切都完成了！

现在我们有两个布局。