在登录页面和仪表板之间拆分视图的最佳方式 路由 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>路由器.jsimport 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;应用.jsimport 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({

  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

        },

      ]

    }

  ]

});

然后，您的已登录布局组件将包含当前在 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>

...而你的主应用组件实际上只是一个：router-view

MainApp.vue

<template>

  <router-view></router-view>

</template>

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

它也没有名称，因为您实际上并不想仅导航到已登录的布局。它总是在那里为其他页面服务。