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

Question

我该如何解决这个问题。

我有一个按钮，应该 link 我可以查看我创建的对象。例如

   <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
    })
}

这是 warning/error 我得到的：

[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是一个link到当前活动的Vue路由，and there are also other methods you can call on it, to do differend things

Answer 2

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

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

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

Vue router - missing param for named route

javascript

vue.js

vue-router