Vue-router page refresh or URL access

1
votes

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.

2
vue.jsvue-router
You shouldn't use the Home component for the path *. Just create like in the link you added a NotFoundComponent component or something like that which display to the user a 404 error. – Zysce
That doesn't have anything with my problem acutally, because /main does exists – Miko

2 Answers

1
votes

I solved it with adding

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

into the web.php file

0
votes

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