如何将参数传递给未命名的路由：TypeError：'instanceof' 的右侧不可调用

Question

我有一条路线：

router.js：

       {
            path: "/books/new/:title",
            name: "new_book",
            component: () => 
import('./components/user/NewBookView.vue')
        }

我尝试通过路由器推送：

CreateBook.vue：

this.$router.push({
    name: "new_book",
    params: {
         title: this.bookJson.data.title,
         book: this.bookJson.data
    }
});

但是我得到了一个

Error in nextTick: "TypeError: 
Right-hand side of 'instanceof' is not callable"

错误。

我需要将bookJson 作为参数传递给我的NewBookView.vue 组件：

NewBookView.vue：

...
        data:  function()  {
            return {
                book: JSON
            }
        },
        created() {
            this.book = 
this.$route.params.book;
        }
...

我试过了

this.$router.push({
    path: "/books/new/" + 
this.booksJson.data.title,
    params: {
         book: this.bookJson.data
    }
});

但book 参数似乎是undefined。

所以似乎除非路由被命名，否则我无法传递参数，但如果它被命名，我也无法推送它。

编辑：我尝试将其更改为此，但仍然收到Error in nextTick: "TypeError: Right-hand side of 'instanceof' is not callable" 错误：

router.js：

{
    path: "/books/new/:title",
    name: "new_book",
    component: () => import('./components/user/NewBookView.vue'),
    props: route => ({
        // set component property book to the route.params.book value
        book: route.params.book,
        ...route.params
    })
}

CreateBook.vue：

this.$router.push({
    name: "new_book",
    params: {
         title: this.bookJson.data.title,
         book: this.bookJson.data
    }
});
})

NewBookView.vue：

export default {
    props:  {
        book: JSON
    },
    created() {
        this.props.book = this.$route.params.book;
    }
}

Answer 1

使用props function mode

这样设置你的路由器：

{
    path: "/books/new/:title",
    name: "book",
    component: () => import("../pages/Book.vue"),
    props: route => ({
        // set component property book to the route.params.book value
        book: route.params.book,
        ...route.params
    })
}

不要使用data，而是在您的组件上使用props：

export default {
  name: "home",
  props: {
    title: String, 
    book: Object
  }
};

并像这样推送到您的路线：

this.$router.push({
    name: "book",
    params: {
        title: "Foo Bar",
        book: {
            id: 1,
            title: "Foo Bar",
            author: "John Doe"
        }
    }
});

演示：https://codesandbox.io/s/vue-router-demo-3cfqs?file=/pages/Home.vue