Skip to content

Vue Routes

Routes map path patterns to components (and optional names/meta). This lesson covers practical patterns, syntax, and mistakes to avoid.

Declaring Routes

Routes map path patterns to components (and optional names/meta).

Keep the route table as your sitemap.

const routes = [
  { path: '/', name: 'home', component: Home },
  { path: '/users/:id', name: 'user', component: User, props: true },
]

Named route with param as prop.

Meta

meta.requiresAuth for guards
  • Prefer Composition API + script setup.
  • Use computed for derived UI.
  • Keep side effects intentional.
  • Practice in a small Vite app.

Vue Routes Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
name stable link Nav
alias extra paths Optional
redirect send away Nav
children nested Layout
meta guard data Auth
props true Pass params

props: true

Pass params as component props for clearer APIs.

Common Mistakes

  • Duplicated hard-coded paths in links.
  • Anonymous routes with no names when navigating a lot.

Key Takeaways

  • Vue Routes is important in Vue apps.
  • Practice in SFCs.
  • Prefer clear naming.
  • Check Vue docs for details.

Pro Tip

Prefer router.push({ name: 'user', params: { id } }).

You now understand vue routes. Next, continue with Route Params to keep building your Vue skills.