Как передать параметр в безымянный маршрут: TypeError: правая часть instanceof не вызывается - PullRequest
Новая
       78

Как передать параметр в безымянный маршрут: TypeError: правая часть instanceof не вызывается

0 голосов
/ 11 июля 2020

У меня есть маршрут:

роутер. js: 

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

на который я пытаюсь сделать sh через роутер:

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.

Таким образом, кажется, что я не могу передать параметр, если маршрут не назван, но если он назван, я не могу pu sh либо на него.

РЕДАКТИРОВАТЬ : Я пытался изменить его на это, но все равно получаю ошибку Error in nextTick: "TypeError: Right-hand side of 'instanceof' is not callable":

маршрутизатор. 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;
    }
}

1 Ответ

1 голос
/ 11 июля 2020

Используйте режим функции props

установите маршрутизатор следующим образом: 

{
    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
  }
};

и pu sh к вашему маршруту следующим образом: 

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

...