seo Question posted in
Some basic information to get you started with this can be found here.

Vue-Router with dynamically generated aliases (also SSR) – SEO

Our business logic allows different types of profile pages (user profiles, company profiles, etc – each with its own template), but the URLs do not discriminate between the types of profiles. All URLs are of the format:

mysite.com/{{ profile-vanity-alias }}

How would a vue-router configuration determine which component to render? e.g.

  • mysite.com/zuckerberg should render a user profile page
  • mysite.com/facebook should render a company profile page
  • mysite.com/jeffbezos does not exist so it should render a 404
  • mysite.com/companies/usa should render a different page with a list of companies from USA (/companies/:country? is a known route that can be hardcoded)

Furthermore, we’re also considering to use vue-ssr (for SEO); I never really used SSR, so that’s something where I wouldn’t know where to start – a few pointers would be extremely helpful!

Thanks!

Tags:

2

Answers


  1. 0

    you can use switch logic to determine which component you need to load, then dynamically load the component.

    <component v-bind:is="component" />

    Maybe you can look into detail with this article. https://blog.logrocket.com/how-to-make-your-components-dynamic-in-vue-js/

    Login or Signup to reply.
  2. 0

    The route path is obviously something like /:profile. I would have a generic parent component that responds to that route and loads the corresponding profile object (from the API, etc) and, based on some flag or other criteria, it displays the profile component of the person or the one of the company – and here a dynamic component might play a role.
    As a short sketch, in the parent component I would have:

    <div>
   <user-profile v-if="currentObject.isUser" :id="currentObject.id" />
   <company-profile v-if="currentObject.isCompany" :id="currentObject.id" />
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search