使用 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
  • 后端
    • Index.vue
    • 仪表板.vue
  • 前端
    • Index.vue
    • 仪表板.vue
    • 作者
      • Authors.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 sn-ps，请不要使用 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')
  }
]