---
url: "https://vueda.dev/v3/reference/api/js/router/makeCrud/functions/makeCRUDRoutes.md"
title: "makeCRUDRoutes"
---

# makeCRUDRoutes

## Overview

Generate CRUD routes for a given app and model.

Call this once during application setup and register the two records it returns. Besides building
them, it registers the configured checks as a `beforeEach` guard, so a navigation that changes the
app, model, or action reruns them even when it stays inside one of the two records, and it starts
watching for a change of authenticated user. When one happens while the application sits on one of
these routes, it reruns the same checks against that route and redirects if the new user may not
use it. Neither of those reruns the checks for a navigation that only changes the query string or
the primary key, since nothing about the checked metadata depends on either.

The two records are `actionrouter.detailview` at `/:app/:model/:action/:pk`, for one object, and
`actionrouter.listview` at `/:app/:model/:action/`, for a model or several objects. The list route
reads `pk` from the query string instead, as one repeated value per primary key (`?pk=4&pk=7`),
which a bulk action targets. Each value is one whole key and is never split, so `?pk=4,7` names the
single key `4,7`. Both routes pass `app`, `model`, `action`, and `pk` to the component as props. Either
route may carry a `returnPath` query value, where an action view goes after it succeeds or is
cancelled.

## Signature

`makeCRUDRoutes(params)`

### Parameters

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| <span id="param-params">params</span> | `object` | yes | The parameters. |

#### params Properties

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| <span id="param-params-actionRedirect">actionRedirect</span> | `any` |  |  | The route to redirect if model/action not found. |
| <span id="param-params-authRedirect">authRedirect</span> | `string` |  |  | The route to redirect to if the user is not authenticated. |
| <span id="param-params-component">component</span> | `any` |  |  | The component to use for the routes. |
| <span id="param-params-groups">groups</span> | `string[]` |  |  | The groups required to access the views. |
| <span id="param-params-groupsRedirect">groupsRedirect</span> | `any` |  |  | The route to redirect to if the user is not in the required groups. Required when `groups` names at least one group. |
| <span id="param-params-pathPrefix">pathPrefix</span> | `string` |  |  | The prefix to add to the path. |
| <span id="param-params-pinia">pinia</span> | `Pinia` |  |  | The Pinia instance. |
| <span id="param-params-router">router</span> | `Router` |  |  | The Vue router instance. |
| <span id="param-params-vueApp">vueApp</span> | `App` |  |  | The Vue app instance. |

### Returns

`RouteLocationNormalizedGeneric[]`

The generated routes.

## Examples

```js
import { createRouter, createWebHistory } from 'vue-router';
import ActionView from '@/views/ActionView.vue';
import { makeCRUDRoutes } from '@vueda/router/makeCrud.js';

const router = createRouter({ history: createWebHistory(), routes: [] });

// In your app setup (after createApp):
router.addRoute(...makeCRUDRoutes({
    component: ActionView,
    vueApp: app,
    router,
    pinia,
    authRedirect: { name: 'login' },
    actionRedirect: { name: 'not-found' },
}));
```

## Source

`client/lib/router/makeCrud.js:177`