I’m exploring the turbo router, in the hope that I can replace the current vue/router setup that I have for a particular page.
The page is a course page for a training company that offers many different training courses, and each course page has lots of info related to it.
This content is split into sections that can be navigated using a menu on the page. When navigating these pages, I’d like to update the URL in the browser, so that if a user comes directly into /course/{slug}/agenda for example, they’ll be shown the agenda in the content area.
Here is a simple example of the layout that I have
I currently have this working with a vue router setup, having all the course data loaded on the first page load, then passing it through to vue components with props. But I’d quite like to replace this with a better php/october approach to reduce javascript filesize etc…
My initial thought was to use ajax with the data attributes api. I’ve got this kinda working, where clicking a menu item, the ajax request renders the relevant partial in the content area. But it doesn’t feel very clean and the URL doesn’t update.
For example, in the Course component I’m having to check for URL parameters on initial load to determine which partial should be loaded into the content. The URL structure is /course/:slug/:section?/:id? And it’s all just a bit filthy imo.
I believe a better approach would be to use turbo router instead.
I’ve never used the turbo router before, so I do have a question.
Would I need to create multiple pages? One for each course section, so I’d have all these in my theme, just for my “single” course page.
- /theme/training-company/pages/overview.htm
- /theme/training-company/pages/agenda.htm
- /theme/training-company/pages/tutors.htm
- /theme/training-company/pages/tutor-profile.htm
- /theme/training-company/pages/outcomes.htm
- /theme/training-company/pages/qualifications.htm
Or is there a better way?
