Vue.js 2 Design Patterns and Best Practices

Category detail

In order to navigate the user to the category detail page, we'll need to create a _id.vue file inside the categories folder. This will give us access to the ID parameter inside this page. This process is similar to before, except that now we've also added a validate function that checks whether the id parameter exists:

<script>import axios from 'axios'export default {  validate ({ params }) {    return !isNaN(+params.id)  },  asyncData ({ req, params }) {    return axios.get(`http://localhost:3001/recipes?     categoryId=${params.id}`)      .then((res) => {        return {          recipes: res.data        }      })  },}</script>

The validate function ensures that the parameter exists for this route, and if it doesn't exist, it will navigate the user to an error (404 ...