I removed the hashbang in the link with history mode in my router file. Now when I refresh a page I got the 404 error.
I tried to follow this link
then, I added the part in firebase.json :
{"hosting": {"public": "dist","rewrites": [{"source": "**","destination": "/index.html"}]}}however nothing has changed.
I don't understand why I've still this error. I tried many things but I can't find something to fix it.
This is my router file :
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
redirect: '/catalog'
},
{
path: '/catalog',
name: 'Catalog',
component: Catalog
},
{
path: '/catalog/category/:category',
name: 'ProductsList',
component: ProductsList
},
{
path: '/catalog/category/:category/product/:id',
name: 'ProductDetail',
component: ProductDetail,
},
{
path: '/catalog/category/:category/product/create',
name: 'CreateProduct',
component: CreateProduct
}
]
});
When using the history mode in the Vue Router, you need to make sure that your server is configured to handle client-side routing correctly. In this case, since you are hosting your app on Firebase, you need to make sure that the rewrites configuration in your firebase.json file is set up correctly.
The configuration you have provided in your firebase.json file should work in most cases, but there are a few things you can try if it's not working:
Make sure that you have deployed your updated firebase.json file to Firebase.
Try using a wildcard ** as the source value instead of a single *. This will match all possible paths in your app and redirect them to /index.html.
If you are using a custom domain for your app, you might need to add a redirects section to your firebase.json file to handle the client-side routing correctly. Here is an example of how you can do this:
{"hosting": {"public": "dist","redirects": [{"source": "**","destination": "/index.html","type": 301}]}}