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

Question

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

MainApp.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');

从上面的这些代码中，每次我转到“/返回/登录”路由时，登录页面始终显示仪表板（侧边栏，topnav和页脚）组件，是的，我知道为什么会发生这种情况，因为它总是呈现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({&nbsp; mode: 'history',&nbsp; routes: [&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; title: 'Login Page',&nbsp; &nbsp; &nbsp; path: '/back/login',&nbsp; &nbsp; &nbsp; name: 'login',&nbsp; &nbsp; &nbsp; component : Login&nbsp; &nbsp; },&nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; path: '',&nbsp; &nbsp; &nbsp; component: LoggedInLayout,&nbsp; &nbsp; &nbsp; children: [&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: 'Dashboard',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: '/',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'dashboard',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: Dashboard&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; path: '/post',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name: 'post',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; component: Post&nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; }&nbsp; ]});然后，您的已登录布局组件将包含当前在 MainApp 组件中的所有内容的元素LoggedInLayout.vue<template>&nbsp; <div class="main-wrapper">&nbsp; &nbsp; <div class="navbar-bg"></div>&nbsp; &nbsp; <TopNav />&nbsp; &nbsp; <SideBar />&nbsp; &nbsp; <div class="main-content">&nbsp; &nbsp; &nbsp; <router-view></router-view>&nbsp; &nbsp; </div>&nbsp; &nbsp; <Footer />&nbsp; </div></template>...而你的主应用组件实际上只是一个：router-viewMainApp.vue<template>&nbsp; <router-view></router-view></template>请注意，路由文件中的条目具有一个空字符串作为路径。这意味着它不会向路线添加任何内容。帖子仍可在 访问。LoggedInLayoutyourapp.com/post它也没有名称，因为您实际上并不想仅导航到已登录的布局。它总是在那里为其他页面服务。