CODEWITHSUNDEEP
vue.jsvue-router
Miko
Miko

Reputation: 373

Vue-router page refresh or URL access

I have a landing page with register/login from that redirects to main page with content. After successful login I redirect like this:

this.$router.push({ name: 'main' })

And this works, but if I refresh the page or try to access it from url for example like http://testapp.test/main I get error: Page does not exists 404. Currently I don’t have any protection against access to pages that are only for logged in users, I also added ‘*’ path in router for undefined routes and it also just throws 404 instead of loading home page. Here are my router settings:

import Vue from 'vue'
import VueRouter from 'vue-router'
import BootstrapVue from 'bootstrap-vue'
import {store} from './store/store'

Vue.use(BootstrapVue);
Vue.use(VueRouter);

window.Vue = require('vue');


import Home from './components/LandingPage.vue'
import Main from './components/MainPage.vue'
import Logout from './components/Logout.vue'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
        {
            path: '/main',
            name: 'main',
            component: Main,
        },
        {
            path: '/logout',
            name: 'logout',
            component: Logout,
        },
        {
            path :'*',
            name: 'home',
            component: Home,
        }
    ],
});


const app = new Vue({
    el: '#app',
    components: { Home, Main, Logout },
    router,
    store,
});

I tried with https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations but I am not sure if I did it right. What I did is copied code for apache configuration and replaced existing code in .htaccess with it. But then even route from login stops working and if I access /main it gives me 404 error.

Upvotes: 1

Views: 3935

Answers (2)

Miko
Miko

Reputation: 373

I solved it with adding

Route::get('/{vue_capture?}', function () { return view('welcome'); })->where('vue_capture', '[\/\w\.-]*');

into the web.php file

Upvotes: 1

tanaydin
tanaydin

Reputation: 5316

You have to made also server side configuration for this.. As an alternative, you can try other router modes? like "hash"

Here is documentation for mode and server configuration.

https://router.vuejs.org/api/#mode

https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

Upvotes: 0

Related Questions