Refresh the page to change the section using vue.js

Question

Refresh the page to change the section using vue.js

I am currently working on a website using Laravel and Vue.js. I require two separate sections for the site:

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

Within the resource/js/app.js file, I have included the main components as follows:

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;

A challenge I am facing is when accessing https://www.example.com/authors via the browser it loads correctly with the desired template. However, if I navigate to it from the admin section, it loads in the Admin template.

The organization of files is structured as below:

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

When on www.example.com, the main layout loaded is from resource/js/frontend/Index.vue.

Conversely, when on www.example.com/admin, the main layout loaded is from resource/js/backend/Index.vue

If I directly use the URL via the browser, the main layouts load correctly. However, if I utilize

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

from the admin section, the authors component gets loaded within the admin layout instead of the frontend layout.

javascript vue.js vue-component

Answer 1

Answer №1

When using Vue-Router, it only swaps out the component loaded in its router-view element, rather than redirecting to a new page. This is advantageous for single page applications.

If your project does not require a single page application and consists mainly of Vue snippets within HTML/CSS files, it is recommended to handle routing without vue-router in Laravel by defining layouts in your HTML pages.

For projects where most or all work is done within a single Vue application, you can create a top-level component that manages layout rendering around different views like so:

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

In order to switch between layouts, you can emit events directly from your top-level views as demonstrated in the example, or use Vuex store. Emitting layouts for every view may not be the most efficient method but works effectively.

Alternatively, you could separate admin and default functionalities into different Vue applications. However, maintaining multiple large apps with separate routes can become complex. Consider setting up a fallback route to redirect users to another application if needed:

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

Answer 2

When using Vue-Router, it only swaps out the component loaded in its router-view element, rather than redirecting to a new page. This is advantageous for single page applications.

If your project does not require a single page application and consists mainly of Vue snippets within HTML/CSS files, it is recommended to handle routing without vue-router in Laravel by defining layouts in your HTML pages.

For projects where most or all work is done within a single Vue application, you can create a top-level component that manages layout rendering around different views like so:

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

In order to switch between layouts, you can emit events directly from your top-level views as demonstrated in the example, or use Vuex store. Emitting layouts for every view may not be the most efficient method but works effectively.

Alternatively, you could separate admin and default functionalities into different Vue applications. However, maintaining multiple large apps with separate routes can become complex. Consider setting up a fallback route to redirect users to another application if needed:

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

Refresh the page to change the section using vue.js

Answer №1

Similar questions

What is the process for incorporating an external script into my Vue methods?

Can we use a switch statement instead of having multiple @Input()s in Angular?

Dual Networked Socket.IO Connection

Ways to verify every entered word without having to click a button

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

When `focus` is bound to a jQuery event handler, the behavior of the select element becomes erratic on

Elements in Motion

What is the best way to extract an object by its specific id using json-server?

A plethora of color choices in a Multi-select Box

Vue-jest was unable to gather coverage data from a Vue file

What is the best way to create a clickable background for a modal window?

What is the method for accessing a local XML file with $.ajax?

Save a PHP variable and then use it on an HTML page

Anchor tags are not visible to Jquery

Guide to adding an image with feathers.js and multer:

Error encountered during installation of Vuetify in Nuxt: "npm err! [email protected] install: `node build.js || nodejs build.js`"

Looking to minimize the amount of HTML code in Angularjs by utilizing ng-repeat

Using a combination of stringify, regular expressions, and parsing to manipulate objects

Retrieve the value of an object without relying on hardcoded index values in TypeScript

Exploring the combined application of the AND and OR operators in JavaScript programming