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

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

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>

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

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

app.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;

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”路径时，登录页面总是显示仪表板（边栏、topnav和页脚）组件，是的，我知道为什么会发生这种情况，因为它总是呈现MainApp.vue。 由于这是我第一次使用vuejs制作SPA应用程序，我仍然不知道最好的方法是什么（如果不是SPA，解决这个问题会很容易），所以我在这里尝试了一些愚蠢的方法，我添加了一些类似的条件

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

它给了我一个错误“这个$route没有定义”，我猜它只在组件内部工作，是吗

---

因此，我想问一个在登录页面和仪表板页面之间分割视图的最佳方法。处理这个问题的一个方法是使用一个中间页面组件，该组件只包含您想要的布局，其他路由嵌套在它下面

您的路线可能如下所示：

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>

<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>

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

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

请注意，routes文件中的

LoggedInLayout

条目中有一个空的路径字符串。这意味着它不会向路由添加任何内容。Post仍然可以访问

yourapp.com/Post

---

它也没有名称，因为您实际上不想单独导航到LoggedInLayout。它总是为其他页面服务。

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

您的路线可能如下所示：

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>

<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>

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

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

请注意，routes文件中的

LoggedInLayout

条目中有一个空的路径字符串。这意味着它不会向路由添加任何内容。Post仍然可以访问

yourapp.com/Post

---

它也没有名称，因为您实际上不想单独导航到LoggedInLayout。它总是在其他页面中提供服务。

您是否尝试使用

MainApp

进行路由？您是否尝试使用

MainApp

进行路由？谢谢您回答我的问题。是的，在对vue路由器做了一些研究之后，我用这种方法解决了这个问题，得到了相同的答案。我只是不知道哪种方法是最好的，因为我有很多方法可以做到这一点（比如愚蠢的方法或懒惰的方法）。谢谢你回答我的问题。是的，在对vue路由器做了一些研究之后，我用这种方法解决了这个问题，得到了相同的答案。我只是不知道哪种方法是最好的，因为我有很多方法（比如愚蠢的方法或懒惰的方法）。