Accessing Router and Route Objects
Introduction
For plugin developers working with Codex, understanding how to interact with the router and route objects is crucial for creating dynamic, responsive components. In Vue.js, these objects are accessed via this.$router and this.$route respectively. This guide will explain their usage and provide a comprehensive list of the current routes in Codex.
Before continuing with this tutorial, please make sure you have read our plugins Quick Start guide and Create your first plugin tutorial, which goes through the setup of the first plugin used during this tutorial.
Accessing $router and $route:
this.$router: This is the Vue Router instance. You can use it to programmatically navigate to different pages, check the current route, or modify routing behavior.this.$route: This object represents the current active route. It provides access to the route's path, query parameters, route parameters, and more.
These objects are essential for creating components that respond to routing changes and interact with Codex's navigation.
For more details on the Vue Router, please refer to the official documentation.
Current Routes in Codex
Below is a table of the current routes available in Codex, categorized into Organization and Site routes. Each entry includes the route's path, name, and the parameters it accepts.
When navigating within the organization context, the orgName parameter is automatically populated based on the current organizational scope. This allows for seamless transitions between routes under the same organization without the need to explicitly specify the orgName each time. This feature is particularly useful when accessing routes directly from the organization dashboard, ensuring a consistent and streamlined navigation experience.
Similarly, when operating within a specific site, the siteName parameter is intelligently filled by Vue Router, reflecting the current site context. This eliminates the need for manual input of the siteName when moving between routes that are part of the same site. This automatic parameter handling is especially advantageous when navigating from the site dashboard, enhancing the user's navigation flow and maintaining the context of the site being managed.
Organization Routes
| Path | Name | Parameters |
|---|---|---|
/:orgName/user-settings/profile | user-profile | orgName |
/:orgName/user-settings/notifications | user-notifications | orgName |
/:orgName/user-settings/author | user-author | orgName |
/:orgName/authors | authors | orgName |
/:orgName/authors/:id | authors-edit | orgName, id |
/:orgName/dashboard-users | dashboard-users | orgName |
/:orgName/dashboard-users/:id | edit-siteUsers | orgName, id |
/:orgName/home | home | orgName |
/:orgName/sites | sites | orgName |
/:orgName/notifications/ | all-notifications | orgName |
/:orgName/api-keys | api-keys | orgName |
/:orgName/labels | labels | orgName |
/:orgName/teams | teams | orgName |
/:orgName/teams/:id | teams-edit | orgName, id |
/:orgName/models | models | orgName |
/:orgName/models/:id | models-edit | orgName, id |
/:orgName/plugins | plugins | orgName |
/:orgName/plugins/:id | plugins-edit | orgName, id |
/:orgName/webhooks | webhooks | orgName |
/:orgName/webhooks/:id | webhooks-edit | orgName, id |
/:orgName/presets | presets | orgName |
/:orgName/assets | assets | orgName |
/:orgName/all-integrations | all-integrations | orgName |
/:orgName/jobs | jobs | orgName |
/:orgName/jobs/:id | jobs-details | orgName, id |
/:orgName/localizations | localizations | orgName |
/:orgName/localizations/:language | edit-localizations | orgName, language |
Site routes
| Path | Name | Parameters |
|---|---|---|
/:orgName/plugins/* | plugins | orgName |
/:orgName/:siteName/plugins/* | plugins-site | orgName, siteName |
/:orgName/:siteName/sections | sections | orgName, siteName |
/:orgName/:siteName/urls | urls | orgName, siteName |
/:orgName/:siteName/lists/entries-lists | entries-lists | orgName, siteName |
/:orgName/:siteName/lists/entries-lists/:id | edit-entries-lists | orgName, siteName, id |
/:orgName/:siteName/entries/:viewId | entries | orgName, siteName, viewId |
/:orgName/:siteName/entries/:viewId/:model/:id | entries-edit | orgName, siteName, viewId, model, id |
/:orgName/:siteName/tags | tags | orgName, siteName |