在登录页面和仪表板之间拆分视图的最佳方式 用于 SPA 的路由 Vue js

Question

当我想在登录页面和仪表板之间分割视图时遇到问题，这是我的代码

主应用程序.vue

<template>
  <div class="main-wrapper">
    <div class="navbar-bg"></div>
    <TopNav />
    <SideBar />
    <div class="main-content">
      <router-view></router-view>
    </div>
    <Footer />
  </div>
</template>

<script>
import TopNav from "./partials/TopNav";
import SideBar from "./partials/SideBar";
import Footer from "./partials/Footer";
export default {
  name: "MainApp",
  components: {
    TopNav,
    SideBar,
    Footer
  }
};
</script>

路由器.js

import Vue from 'vue';
import VueRouter from 'vue-router';

import Dashboard from '../components/Dashboard';
import Post from '../components/Post';
import Login from '../view/Login';

Vue.use(VueRouter);

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      title: 'Login Page',
      path: '/back/login',
      name: 'login',
      component : Login
    },
    {
      title: 'Dashboard',
      path: '/',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/post',
      name: 'post',
      component: Post
    },
  ]
});

export default router;

应用程序.js

import Vue from 'vue';
import Vuex from 'vuex';
import Router from './router'
import MainApp from './layouts/MainApp.vue'

Vue.use(Vuex);

new Vue({
    router: Router,
    render: h => h(MainApp)
}).$mount('#app');

从上面的这些代码中，每次我进入“/back/login”路线时，登录页面总是会出现仪表板（侧边栏、顶部导航和页脚）组件，是的，我知道为什么会发生这种情况，因为它总是呈现 MainApp.vue。因为这是我第一次用vuejs制作SPA应用程序，我仍然不知道最好的方法是什么（如果不是SPA，很容易解决这个问题），所以我在这里尝试了一些愚蠢的事情，我添加了一些条件像这样

new Vue({
        router: Router,
        render: $route.name ? !== 'login' ? h => h(MainApp) : h => h(login)
    }).$mount('#app');

它给了我错误“这个 $route 未定义”，我想它只能在组件内部工作，是吗？

所以我想问在登录页面和仪表板页面之间分割视图的最佳方法

Answer 1

处理此问题的一种方法是使用一个中间页面组件，其中仅包含您想要的布局，并在其下方嵌套其他路由。

您的路线可能如下所示：

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      title: 'Login Page',
      path: '/back/login',
      name: 'login',
      component : Login
    },
    {
      path: '',
      component: LoggedInLayout,
      children: [
        {
          title: 'Dashboard',
          path: '/',
          name: 'dashboard',
          component: Dashboard
        },
        {
          path: '/post',
          name: 'post',
          component: Post
        },
      ]
    }
  ]
});

然后您的 LoggedInLayout 组件将包含 MainApp 组件中当前的所有元素

LoggedInLayout.vue

<template>
  <div class="main-wrapper">
    <div class="navbar-bg"></div>
    <TopNav />
    <SideBar />
    <div class="main-content">
      <router-view></router-view>
    </div>
    <Footer />
  </div>
</template>

...你的 MainApp 组件实际上只是一个router-view：

主应用程序.vue

<template>
  <router-view></router-view>
</template>

请注意，LoggedInLayout路由文件中的条目有一个空字符串作为路径。这意味着它不会向路线添加任何内容。帖子仍可在 访问yourapp.com/post。

它也没有名称，因为您实际上不想只导航到 LoggedInLayout。它始终为其他页面服务。