vue-router route with params not working on page reload

Question

I am using vue-router on my project.

I am able to navigate to my named routes perfectly fine. My only problem is when I use a named route which expects a parameter, it does not load when I refresh the page.

here is my route:

'/example/:username': {
    name: 'example-profile',
    title: 'Example Profile',
    component: ExampleComponent
}

this is how I am using the vue-router route:

<a v-link="{ name: 'example-profile', params: { username: raaaaf } }">
    Example Link
</a>

When I select Example Link I get mydomain.com/example/raaaaf.

On first load, it renders the correct template, but when I refresh or manually entered the link on the address bar, I am redirected to my Page Not Found page and the method called when the page is created is not triggered.

This is what I have on my ExampleComponent:

    <template>
    <div class="small-12 left">
        <side-bar></side-bar>
        <div class="store-right">
            <store-details></store-details>
            <store-menu></store-menu>
            <store-listings></store-listings>
        </div>
    </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    username: null,
                    user: null,
                }
            },
    
            created() {
                this.getUser()
            },
    
            methods: {
                getUser() {
                    console.log(this.$route.params);
                }
            }
        }
    </script>

Answer 1

I don't know if anyone else if facing the same issue, but I was having a problem getting route params on refresh. The route parameter I was trying to get was an ID number and I use that ID to fetch data and populate the page. I found (through many console logs) when I refreshed, the number was turning into a string and thats why the page was not working. I sorted it out but casting the ID to number before using it:

Number($route.params.id)

Answer 2

You need to configure your server properly. Your server is essetially looking for an index file in a /example/raaaaf directory. I'd read through this page carefully: http://router.vuejs.org/en/essentials/history-mode.html