时间戳

首页 > 解决方案 > Vue路由器 - 命名路由缺少参数

javascript - Vue路由器 - 命名路由缺少参数

问题描述

我怎么解决这个问题。

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

   <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组件尚未加载。有什么我想念的吗？

标签： javascriptvue.jsvue-router

解决方案

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

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

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

在上面的代码中，$router是一个指向当前活动的 Vue 路由器的链接，还有其他方法可以调用它，做不同的事情

推荐阅读