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

Question

我该如何解决这个问题。

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

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

Answer 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