Switch section (reload page?) with vue.js

Question

I'm using Laravel + Vue.js to code a website. I Need two sections:

• Site: https://www.example.com
• Admin: https://www.example.com/admin

In resource/js/app.js I include the two main components:

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,
    }
});

In the routes.js file:

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;

The problem is that if I open https://www.example.com/authors via brower it load correctly with the right template. But if I click it from admin section it loads in the Admin template.

The file are arranged this way:

• resources
  • js
  • backend
    • Index.vue
    • Dashboard.vue
  • frontend
    • Index.vue
    • Dashboard.vue
    • Authors
      • Authors.vue

When I'm in www.example.com the main layout loaded is resource/js/frontend/Index.vue .

When I'm in www.example.com/admin the main layout loaded is resource/js/backend/Index.vue

If I use the url via browser le main layouts are loaded correctly. I if I use

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

from admin section the component authors is loaded, but in the admin layout e not in the frontend layout.

Answer 1

Vue-Router only changes the component which is loaded in its router-view component, it doesn't actually redirect anywhere (which is good when you're designing a single page application).

If you don't need a single page application, but only a few Vue snippets on predominantly HTML/CSS files, don't use vue-router and handle routing your separate views in Laravel, defining the 'layout' in your HTML.

If you're planning to do most/all your work in a single vue application, you can design a single top-level component to handle wrapping layouts around the rendered views as such:

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

You can communicate to change layouts through emitting events directly from your top-level views (the components rendered in router-view) as shown in the example, or VueX store. I'm not sure if this is the easiest way to do this, as it requires you to emit the layout for every single view in your application.

Finally, you could have several different Vue applications for admin and default, but in that case you can't use the same routing file if one has a defined route for authors and the other does not. You may also define a fallback route that automatically redirects the page to your other application, but it's hard to follow and maintain multiple large apps for different parts of your site in my experience:

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