Question

我正在使用vue-cls使用webpack-template与vue-cli一起安装2.5.13版。

现在，我想为所有公共页面使用生成的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-Template，而是使用App.vue-Template。如果我刷新此页面，则可以正常工作。

你知道为什么吗？是否有一些最佳实践可以为不同的路径使用两个或更多不同的模板？

亲切的问候，六甲

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

好的，一切都完成了！

现在我们有两个布局。

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

1 个答案: