vue-router route with params not working on page reload
<p>I am using vue-router on my project.</p>
<p>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.</p>
<p>here is my route:</p>
<pre class="lang-js prettyprint-override"><code>'/example/:username': {
    name: 'example-profile',
    title: 'Example Profile',
    component: ExampleComponent
}
</code></pre>
<p>this is how I am using the <code>vue-router</code> <code>route</code>:</p>
<pre class="lang-html prettyprint-override"><code>&lt;a v-link=&quot;{ name: 'example-profile', params: { username: raaaaf } }&quot;&gt;
    Example Link
&lt;/a&gt;
</code></pre>
<p>When I select <code>Example Link</code> I get <code>mydomain.com/example/raaaaf</code>.</p>
<p>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 <code>Page Not Found</code> page and the method called when the page is created is not triggered.</p>
<p>This is what I have on my <code>ExampleComponent</code>:</p>
<pre class="lang-html prettyprint-override"><code>    &lt;template&gt;
    &lt;div class=&quot;small-12 left&quot;&gt;
        &lt;side-bar&gt;&lt;/side-bar&gt;
        &lt;div class=&quot;store-right&quot;&gt;
            &lt;store-details&gt;&lt;/store-details&gt;
            &lt;store-menu&gt;&lt;/store-menu&gt;
            &lt;store-listings&gt;&lt;/store-listings&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/template&gt;
    
    &lt;script&gt;
        export default {
            data() {
                return {
                    username: null,
                    user: null,
                }
            },
    
            created() {
                this.getUser()
            },
    
            methods: {
                getUser() {
                    console.log(this.$route.params);
                }
            }
        }
    &lt;/script&gt;
</code></pre>