How can I solve this problem.

I have a button which should link me to the view about the object I have created. For example

   <router-link :to="{ name:DetailView,
                       params:{ id: detail.id}
                     }
                @click="createDetail()> Create Detail
   </router-link>

And in my ponent detail is set after a backend request:

detail:Detail;

createDetail(){
    makeBackendCall().then(detail=>{
        this.detail=detail
    })
}

This is the warning/error I get:

[vue-router] missing param for named route "name:DetailView":
Expected "id" to match "[^\/]+?", but received ""

Obviously the detail ponent is not yet loaded. Is there something I am missing?

How can I solve this problem.

I have a button which should link me to the view about the object I have created. For example

   <router-link :to="{ name:DetailView,
                       params:{ id: detail.id}
                     }
                @click="createDetail()> Create Detail
   </router-link>

And in my ponent detail is set after a backend request:

detail:Detail;

createDetail(){
    makeBackendCall().then(detail=>{
        this.detail=detail
    })
}

This is the warning/error I get:

[vue-router] missing param for named route "name:DetailView":
Expected "id" to match "[^\/]+?", but received ""

Obviously the detail ponent is not yet loaded. Is there something I am missing?

• javascript
• vue.js
• vue-router

Share Improve this question Follow edited Aug 25, 2020 at 7:58 Julian 36.9k2424 gold badges135135 silver badges191191 bronze badges asked Mar 2, 2019 at 15:41 greedsingreedsin 1,27222 gold badges2727 silver badges4949 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You should make a normal html button, and then manually redirect the user after you make your backend object (and use css to style the button)

    <button @click="createDetail()"> Create Detail
    </button>

    createDetail(){
        makeBackendCall().then(detail=>{
            this.$router.push({
                name: DetailView,
                params: {
                    id: detail.id
                }
            })
        })
    }

In the above code, $router is a link to the current active Vue router, and there are also other methods you can call on it, to do differend things

This is a mon mistake when you try to render 'detail.id' for the first time. Probably property 'id' is undefined. So you can do something like this to avoid that warn:

<router-link
    v-if="typeof detail.id !== 'undefined'" ...