Vue路由器-命名路由缺少参数答案

【问题标题】：Vue router - missing param for named routeVue路由器-命名路由缺少参数
【发布时间】：2019-07-24 09:42:31
【问题描述】：

我该如何解决这个问题。

我有一个按钮，可以将我链接到关于我创建的对象的视图。例如

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

在我的组件中 detail 是在后端请求之后设置的：

detail:Detail;

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

这是我得到的警告/错误：

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

显然detail 组件尚未加载。有什么我遗漏的吗？

【问题讨论】：

标签： javascript vue.js vue-router

【解决方案1】：

您应该制作一个普通的 html 按钮，然后在您制作后端对象后手动重定向用户（并使用 css 设置按钮样式）

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

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

在上面的代码中，$router 是指向当前活动的 Vue 路由器的链接，and there are also other methods you can call on it, to do differend things

【讨论】：

【解决方案2】：

这是您第一次尝试渲染“detail.id”时的常见错误。可能属性“id”未定义。所以你可以做这样的事情来避免这个警告：

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

【讨论】：