vue-router route with params not working on page reload


December 2018


5.6k time


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

When I select Example Link I get

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:

<div class="small-12 left">
    <div class="store-right">

    export default {
        data() {
            return {
                username: null,
                user: null,

        created() {

        methods: {
            getUser() {

2 answers


Вам нужно настроить сервер правильно. Ваш сервер essetially ищет индексный файл в /example/raaaafкаталоге. Я прочитал эту страницу тщательно:


Я не знаю, если кто-либо другой, если сталкивается с теми же вопрос, но у меня была проблема с получением маршрута Params на обновления. Параметр маршрута я пытался получить был идентификационный номер, и я использую этот идентификатор для извлечения данных и заполнение страницы. Я нашел (через много журналов консоли), когда я обновилась, число превращалось в строку и вот почему страница не работает. Я разобрался, но заливка идентификатора числа перед использованием: