Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

alphacheck's avatar

url refresh problem

If I refresh my subpage url or any other url it always redirects me to main page or home page.

0 likes
3 replies
Sanctuary's avatar

It'll be hard to help you with as little info as this. You haven't described your project set up at all, and we can't even be sure if this is related to Vue at all, despite it being listed under the Vue channel.

Describe your set up, show some code, tell us what you've tried, all that good stuff. Help us help you. :)

Cronix's avatar

I agree, we need a lot more info. I have a vue app (laravel spark) and it doesn't do that when refreshing. It has to do with your code.

alphacheck's avatar

I am Building a Vue SPA with Laravel. The site url is: http://luminouscraft.com/vue/

When I click on product menu it's showing product page and the url becomes "http://luminouscraft.com/product". But when I refresh/reload the url "http://luminouscraft.com/product" it bring me to home page or it show me 404 page not found.

Bellow are some of my codes:

I am Building a Vue SPA with Laravel. I have a several route here. if I brows my home route i.e. example.com it working fine. But if I brows other routes i.e example.com/subCate it gives me following error: Not Found The requested URL /subCate was not found on this server.

Following are my codes:

  1. routes/web.php
<?php
Route::get('/{any}', 'SpaController@index')->where('any', '.*');
  1. resources/assets/js
<?php
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

import App from './views/App'
import Hello from './views/Hello'
import Home from './views/productList'
import Product from './views/productList'
import ProductDetails from './views/ProductDetails'
import SubCate from './views/subcate'

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
        {
            path: '/product',
            name: 'product',
            component: Product,
        },
        {
            path: '/productDetails',
            name: 'productDetails',
            component: ProductDetails,
        },
        {
            path: '/subCate',
            name: 'subCate',
            component: SubCate,
        },
    ],
});

const app = new Vue({
    el: '#app',
    components: { App },
    router,
});
  1. App.vue
<router-link to="/product"><a>Product</a></router-link>

Please or to participate in this conversation.