Routes from Database

I have a database with a slugs table, containing the slugs and the related component and the referring ID.

Looks something like this: uri: /equipment - type: category - id: 2 uri: /equipment/tools - type: category - id: 5 uri: /equipment/tools/hammer-jammer-xl - type: product - id: 5349 uri: /contact - type: page - id: 5

I need my Vue/Nuxt router to take these from the database on the fly, and send the user to the correct component, but i'm simply lost on how i approach this.

Any suggestions/ideas?

The slugs also update pretty often, so statically adding them is pretty much out of question.

Flu

3 years ago

Level 1

I am not sure if I understand your question correctly.

How about a route and a parameter in the frontend:

//router.js
//or for nuxt => https://nuxtjs.org/docs/features/file-system-routing/
const routes = [
  { path: '/product/:slug', component: Product },
]

//ProductComponent.js
import { useRoute } from 'vue-router'
const route = useRoute()

 onMounted(() => {
      const slug = route.params.slug
})

& then if you want your component to be even dynamic either pass the slug as a parameter or if you have a separate component for each product/type:

<component :is="'Product'+slug"> </component>

//OR

<product-detail :slug="slug"></product-detail>

thoba

3 years ago

Level 1

@Flu Thank you for your answer.

But my problem is that the route never will be "/product/". Thats the biggest issue.

The only thing that knows what uri fits which component, is my database. And it can be everything from a-z, A-Z, 0-9 and _ & /

So i somehow need to fetch the name of the component from the database, but efficiently.

Flu

3 years ago

Level 1

Maybe you use something like a "fallback route" or an "open route". In Nuxt it is just a _.vue file in the root folder, then your complete url can be whatever you like without any "prefix".

Unknown Dynamic Nested Routes https://nuxtjs.org/docs/features/file-system-routing/#unknown-dynamic-nested-routes

Please or to participate in this conversation.