使用 vue.js 切换部分（重新加载页面？）

Question

我正在使用 Laravel + Vue.js 来编写网站。 我需要两个部分：

• 网站： https://www.example.com
• 管理员： https://www.example.com/admin

在resource/js/app.js我包括两个主要组件：

require('./bootstrap');

import VueRouter from "vue-router";
import Frontend from "./frontend/Index";
import Admin from "./backend/Index";
import router from "./routes";

window.Vue = require('vue');
Vue.use(VueRouter);

const app = new Vue({
    el: '#app',
    router,
    components: {
        "index": Frontend,
        "admin": Admin,
    }
});

在routes.js文件中：

import VueRouter from 'vue-router';
import Home from './frontend/Dashboard';
import Authors from './frontend/authors/Authors';
import Admin from './backend/Dashboard';

const routes = [
    {
        path: "/",
        component: Home,
        name: "home",
    },
        path: "/authors",
        component: Authors,
        name: "authors",
    },
    {
        path: "/admin",
        component: Admin,
        name: "admin",
    }
]

const router = new VueRouter({
    routes,
    mode: "history",
})

export default router;

问题是，如果我通过浏览器打开https://www.example.com/authors ，它会使用正确的模板正确加载。 但是，如果我从管理部分单击它，它会加载到管理模板中。

文件是这样排列的：

• 资源
  • js
  • 后端
    • 索引.vue
    • 仪表板.vue
  • 前端
    • 索引.vue
    • 仪表板.vue
    • 作者
      • 作者.vue

当我在www.example.com时，加载的主要布局是resource/js/frontend/Index.vue 。

当我在www.example.com/admin时，加载的主要布局是resource/js/backend/Index.vue

如果我通过浏览器使用 url，则主布局已正确加载。 如果我使用

<router-link class="btn nav-button" :to="{name: 'authors'}">Author</router-link>

从管理部分加载组件作者，但在管理布局中，而不是在前端布局中。

Answer 1

Vue-Router 仅更改在其router-view组件中加载的组件，它实际上并没有重定向到任何地方（这在您设计单页应用程序时很好）。

如果您不需要单页应用程序，而只需要主要 HTML/CSS 文件上的几个 Vue 片段，请不要使用 vue-router 并在 Laravel 中处理您的单独视图，在 HTML 中定义“布局”。

如果您打算在单个 vue 应用程序中完成大部分/所有工作，您可以设计一个顶级组件来处理围绕渲染视图的包装布局，如下所示：

// App.vue

<template lang="html">
  <component
    :is="currentLayout"
  >
    <router-view :layout.sync="layout" />
  </component>
</template>

<script>
import DefaultLayout from '../frontend/Index.vue';
import AdminLayout from '../backend/Index.vue';

const LAYOUTS = {
  frontend: DefaultLayout,
  backend: AdminLayout
}

export default {
  computed: {
    currentLayout() {
      return LAYOUTS[this.layout];
    }
  },
  data() {
    return {
      layout: 'frontend',
    };
  },
};
</script>

// Backend/Dashboard.vue
<template>...</template>

<script>
export default {
  created() {
    this.$emit('update:layout', 'backend')
  }
}
</script>

您可以通过直接从顶级视图（在路由器视图中呈现的组件）发出事件来更改布局，如示例中所示，或者 VueX 商店。 我不确定这是否是最简单的方法，因为它要求您为应用程序中的每个视图发出布局。

最后，您可以为管理员和默认设置几个不同的 Vue 应用程序，但在这种情况下，如果一个为作者定义了路由而另一个没有，则不能使用相同的路由文件。 您还可以定义一个后备路由，自动将页面重定向到您的其他应用程序，但根据我的经验，很难为您网站的不同部分跟踪和维护多个大型应用程序：

const routes = [
...
...
...
  {
    path: "*",
    beforeEnter: (to, from, next) => {
    window.location.href('www.example.com')
  }
]