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:
- routes/web.php
<?php
Route::get('/{any}', 'SpaController@index')->where('any', '.*');
- 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,
});
- App.vue
<router-link to="/product"><a>Product</a></router-link>