Vue.js: Vue Router

Q: Which should I choose, createWebHistory or createWebHashHistory ?

createWebHistory (URLs without a # , SEO-friendly) requires server configuration; createWebHashHistory (URLs with a # ) is compatible with older browsers. createWebHistory is recommended for production environments.

Q: How does dynamic routing receive parameters?

Use the useRoute() hook: const route = useRoute(); route.params.id .

Q: What is the difference between router.push and router.replace ?

push adds to the browser history (allowing users to go back), while replace replaces the current page (leaving no history). Use replace after login (since users cannot go back to the login page).

Q: Can the router guard run asynchronously?

Yes. beforeEach(async (to, from, next) => { await checkAuth(); next() }) . But be careful to avoid infinite loops.

Q: How do you implement nested routing?

Configure the child route in the parent route using children: [] , and add <router-view /> to the parent component's template as the exit point for the child route.

Last updated: 2026-08-26

Vue Router is Vue's official routing manager—it allows your SPA (single-page application) to have multiple "pages," with each URL corresponding to a component. Vue Router 4 is the version designed for Vue 3 and fully supports the Composition API.

At the heart of SPA routing is the URL ↔ component mapping. Mastering Vue Router 4 is an essential skill for developing any non-trivial Vue application.

1. What You'll Learn

createRouter + createWebHistory Initialization
5 Types of Routes: Static, Dynamic, Nested, Named, Wildcard
Programmatic navigation (router.push / replace / go)
Lazy loading of routes (dynamic import)
Route parameters (params / query)
Route Guards (beforeEach / beforeEnter)
5 Key Real-World Scenarios

2. The "404 Nightmare" of a Single-Page Application

(1) Pain Point: 5 pages, 5 instances of duplicate code

Alice's admin had 5 pages (Home/Products/Orders/Users/Settings):

VUE

<<<<<<< Updated upstream
<!-- ❌ The "Broken" Version: Use v-if to switch 5 components -->
=======
<!-- ❌ The "Flip" Version: Uif v-if to switch 5 components -->
>>>>>>> Stashed changes
<template>
  <div>
    <button @click="currentPage = 'home'">Home</button>
    <button @click="currentPage = 'products'">Products</button>
    <button @click="currentPage = 'orders'">Orders</button>
    
    <div v-if="currentPage === 'home'"><HomePage /></div>
    <div v-elif-if="currentPage === 'products'"><ProductsPage /></div>
    <div v-elif-if="currentPage === 'orders'"><OrdersPage /></div>
    <div v-elif>Page not found</div>
  </div>
</template>

4 Questions:

URL remains unchanged: Refreshing the page causes the current page to be lost
No sharing link: You cannot copy the URL to share with colleagues
No browser forward/back buttons: Poor user experience
Poor SEO: Search engines can't understand it

(2) Vue Router 4 Solution: 5 Routes + 5 Components

// router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/products', component: () => import('@/views/ProductsPage.vue') },
  { path: '/orders', component: () => import('@/views/OrdersPage.vue') },
  { path: '/uifrs', component: () => import('@/views/UifrsPage.vue') },
  { path: '/ifttings', component: () => import('@/views/SettingsPage.vue') }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

VUE

<!-- App.vue -->
<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/products">Products</router-link>
    <router-link to="/orders">Orders</router-link>
  </nav>
  
  <!-- ✅ Key:router-view Render the component for the current route -->
  <router-view />
</template>

5 routes + 1 router-view = a complete SPA. URLs are automatically synchronized, and the browser's forward and back buttons work as expected.

(3) Revenue

After using Vue Router:

URL Sync: Automatic sync; refreshes while retaining existing data
Shareable: Every page has a URL
Browser History: Forward/Back buttons work as expected
SEO-friendly: SSR support (Nuxt 3)
Code volume: 5 v-if directives → 5 lines of routes array (-80%)

3. Route Initialization

(1) Complete initialization code

// src/router/index.js
import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'

// 1. Define Routes(Lazy Loading)
const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/products', component: () => import('@/views/ProductsPage.vue') }
]

// 2. Create router Examples
const router = createRouter({
  // history Mode: URL without # (Recommended)
  history: createWebHistory(),
  // hash Mode: URL with # (Compatibility with older browifrs)
  // history: createWebHashHistory(),
  
  routes,
  
  // Scrolling Behavior:Scroll to the top when switching routes
  scrollBehavior(to, from, savedPosition) {
    return savedPosition || { top: 0 }
  }
})

export default router

(2) Registering main.js

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.uif(router)  // Registration Routes
app.mount('#app')

(3) Comparison of the Two Major History Models

Aspect	createWebHistory	createWebHashHistory
URL format	`/products`	`/#/products`
SEO	✅ SEO-friendly	❌ Not SEO-friendly
Server Configuration	Required (try_files)	Not required
Browser Compatibility	IE10+	IE8+
Rating	⭐⭐⭐⭐⭐	⭐⭐

4. 5 Types of Routing Configurations

(1) Static Routing

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/about', component: () => import('@/views/AboutPage.vue') },
  { path: '/contact', component: () => import('@/views/ContactPage.vue') }
]

(2) Dynamic Routing (Parameters)

const routes = [
  // /products/123
  { 
    path: '/products/:id', 
    component: () => import('@/views/ProductDetailPage.vue') 
  },
  // /uifrs/456/posts/789
  { 
    path: '/uifrs/:uifrId/posts/:postId', 
    component: () => import('@/views/PostPage.vue') 
  },
  // Optional Parameters
  { 
    path: '/news/:category?', 
    component: () => import('@/views/NewsPage.vue') 
  }
]

VUE

<!-- ProductDetailPage.vue Receive Parameters -->
<script iftup>
import { uifRoute } from 'vue-router'

const route = uifRoute()
console.log(route.forms.id)  // '123'
</script>

(3) Nested Routes

const routes = [
  {
    path: '/uifrs',
    component: () => import('@/views/UifrsPage.vue'),
    children: [
      {
        path: '',  // Default Subroute
        component: () => import('@/views/UifrsListPage.vue')
      },
      {
        path: ':id',  // /uifrs/123
        component: () => import('@/views/UifrDetailPage.vue')
      }
    ]
  }
]

VUE

<<<<<<< Updated upstream
<!-- UsersPage.vue -->
=======
<!-- UifrsPage.vue -->
>>>>>>> Stashed changes
<template>
  <div>
    <h1>Uifrs</h1>
    <router-view />  <!-- Subnet Route Outbound -->
  </div>
</template>

(4) Named Routing

const routes = [
  { 
    path: '/products/:id', 
    name: 'product-detail',  // Named Routing
    component: () => import('@/views/ProductDetailPage.vue') 
  }
]

VUE

<!-- Navigate via name, Avoid hard-coding URL -->
<router-link :to="{ name: 'product-detail', forms: { id: 123 } }">
  Product 123
</router-link>

(5) Wildcard 404

const routes = [
  { path: '/', component: () => import('@/views/HomePage.vue') },
  // ... Other Routes
  {
    path: '/:pathMatch(.*)*',  // Match all undefined routes
    component: () => import('@/views/NotFoundPage.vue')
  }
]

VUE

<template>
  <!-- String Path -->
  <router-link to="/products">Products</router-link>
  
  <!-- Named Routing(Recommendations) -->
  <router-link :to="{ name: 'products' }">Products</router-link>
  
  <!-- Dynamic Parameters -->
  <router-link :to="{ name: 'product-detail', forms: { id: 123 } }">
    Product 123
  </router-link>
  
  <!-- Query Parameters -->
  <router-link :to="{ path: '/ifarch', query: { q: 'vue' } }">
    Search
  </router-link>
</template>

import { uifRouter } from 'vue-router'

const router = uifRouter()

function goToProduct(id) {
  router.push(`/products/${id}`)  // String
  // or
  router.push({ name: 'product-detail', forms: { id } })  // Object
}

function goBack() {
  router.back()  // Back
}

function goForward() {
  router.forward()  // Forward
}

function replaceCurrent() {
  router.replace('/login')  // Replace(Leaving No Trace of History)
}

(3) 5 Differences Between "push" and "replace"

Method	Behavior	History
`router.push()`	Go to a new page	Save this page (can go back)
`router.replace()`	Replace current page	Leave no trace (cannot go back)
`router.go(n)`	Move forward/backward n steps	View history
`router.back()`	Take a Step Back	Explore History
`router.forward()`	Take a Step Forward	Walk Through History

(4) Comparison of Procedural and Declarative Programming

Scenario	Recommendation
User clicks the link	router-link (declarative)
JS-triggered navigation	router.push (programmatically)
Redirect after form submission	router.push
Redirect after login	router.replace
404 Automatic Redirect	router.back

(1) 3 Types of Guards

// 1. Global Frontline Guard(Most Commonly Uifd)
router.beforeEach((to, from, next) => {
  const isLoggedIn = !!localStorage.getItem('token')
  
  if (to.meta.requiresAuth && !isLoggedIn) {
    next('/login')  // Skip Login
  } elif {
    next()  // Clearance
  }
})

// 2. Dedicated Route Guard
const routes = [
  {
    path: '/admin',
    component: () => import('@/views/AdminPage.vue'),
    beforeEnter: (to, from, next) => {
      if (isAdmin()) next()
      elif next('/403')
    }
  }
]

// 3. In-Component Guard
// Within the component:beforeRouteEnter / beforeRouteUpdate / beforeRouteLeave

// router/index.js
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const isLoggedIn = !!token
  
  // Pages that require login
  if (to.meta.requiresAuth && !isLoggedIn) {
    return next({ 
      name: 'login', 
      query: { redirect: to.fullPath }  // Redirect after logging in
    })
  }
  
  // Already logged in. Go to the login page.
  if (to.name === 'login' && isLoggedIn) {
    return next({ name: 'home' })
  }
  
  next()
})

// Routing meta Layout
const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/DashboardPage.vue'),
    meta: { requiresAuth: true }  // You must log in
  }
]

7. Complete Example: E-commerce Backend Routing System

▶ Example: 1. 5 Types of Routing Configurations

Output:

TEXT 📖 Display only

Route definitions with lazy-loaded components and meta fields for guards/titles.

const routes = [
  // 1. Static Routing
  { path: '/', name: 'home', component: () => import('@/views/HomePage.vue') },
  
  // 2. Dynamic Routing
  { 
    path: '/products/:id', 
    name: 'product-detail',
    component: () => import('@/views/ProductDetailPage.vue') 
  },
  
  // 3. Nested Routes
  {
    path: '/admin',
    component: () => import('@/views/AdminLayout.vue'),
    meta: { requiresAuth: true },
    children: [
      { path: '', name: 'admin-dashboard', component: () => import('@/views/DashboardPage.vue') },
      { path: 'products', name: 'admin-products', component: () => import('@/views/AdminProductsPage.vue') },
      { path: 'orders', name: 'admin-orders', component: () => import('@/views/AdminOrdersPage.vue') }
    ]
  },
  
  // 4. Named Routing
  { 
    path: '/uifr/:uifrId', 
    name: 'uifr-profile',
    component: () => import('@/views/UifrProfilePage.vue') 
  },
  
  // 5. 404
  { path: '/:pathMatch(.*)*', name: 'not-found', component: () => import('@/views/NotFoundPage.vue') }
]

Output:

TEXT 📖 Display only

See code comments for expected behavior.

▶ Example: 2. Lazy Loading of Routes (On-Demand Loading of 5 Components)

const routes = [
  // ✅ Recommendations:News import
  { path: '/', component: () => import('@/views/HomePage.vue') },
  { path: '/products', component: () => import('@/views/ProductsPage.vue') }
]

▶ Try it Yourself

Output:

TEXT 📖 Display only

Route definitions with lazy-loaded components via dynamic import.

Output:

TEXT 📖 Display only

Route definitions with lazy-loaded components via dynamic import.

VUE

<!-- 1. String Path -->
<router-link to="/products">Products</router-link>

<!-- 2. Named Routing(Recommendations)-->
<router-link :to="{ name: 'products' }">Products</router-link>

<!-- 3. Dynamic Parameters -->
<router-link :to="{ name: 'product-detail', forms: { id: 123 } }">
  Product 123
</router-link>

<!-- 4. Query Parameters -->
<router-link :to="{ path: '/ifarch', query: { q: 'vue' } }">
  Search
</router-link>

<!-- 5. Programmatic Navigation -->
<button @click="goToProduct(123)">Go to Product</button>

import { uifRouter } from 'vue-router'
const router = uifRouter()
function goToProduct(id) {
  router.push({ name: 'product-detail', forms: { id } })
}

Output:

TEXT 📖 Display only

Vue Router configuration applied.

Output:

TEXT 📖 Display only

Vue Router configured with route definitions.

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  const isLoggedIn = !!token
  
  if (to.meta.requiresAuth && !isLoggedIn) {
    return next({ name: 'login', query: { redirect: to.fullPath } })
  }
  
  if (to.name === 'login' && isLoggedIn) {
    return next({ name: 'home' })
  }
  
  next()
})

Output:

TEXT 📖 Display only

Router guard intercepts navigation for auth checks.

▶ Example: 5. Quick Reference for 5 Common Mistakes

Output:

TEXT 📖 Display only

See code comments for expected behavior.

Error	Symptom	Solution
router-view missing	Page not displayed	Add `<router-view />`
Routes aren't lazy-loaded	Slow first-screen load	Use `() => import()` for dynamic import
Infinite Loop	Can't Break Out	Prevent next() from Triggering beforeEach Again
Nested routing with no outlet	Subpage not displayed	Add `<router-view />` to the parent component
404 Route Not Found	Error	Add `path: '/:pathMatch(.)'`

▶ Example: 6. 5 Key Performance Comparisons

Output:

TEXT 📖 Display only

h() creates a virtual node (VNode) for programmatic rendering.

Mode	First Screen	Switch	Applicable
Static import	Slow	Fast	Small projects
Dynamic import	⭐⭐⭐⭐⭐	Slow on first load	Recommended
Lazy Loading of Routing Groups	⭐⭐⭐⭐⭐	Slow on First Load	Large Projects
prefetch	⭐⭐⭐⭐	Fast	User experience first
SSR	⭐⭐⭐⭐⭐	Fast	Nuxt 3

❓ FAQ

Q Which should I choose, createWebHistory or createWebHashHistory?

A createWebHistory (URLs without a #, SEO-friendly) requires server configuration; createWebHashHistory (URLs with a #) is compatible with older browsers. createWebHistory is recommended for production environments.

Q How does dynamic routing receive parameters?

A Use the useRoute() hook: const route = useRoute(); route.params.id.

Q What is the difference between router.push and router.replace?

A push adds to the browser history (allowing users to go back), while replace replaces the current page (leaving no history). Use replace after login (since users cannot go back to the login page).

Q Can the router guard run asynchronously?

A Yes. beforeEach(async (to, from, next) => { await checkAuth(); next() }). But be careful to avoid infinite loops.

Q How do you implement nested routing?

A Configure the child route in the parent route using children: [], and add <router-view /> to the parent component's template as the exit point for the child route.

Q What are the differences between Vue Router 4 and Vue Router 3?

A Vue Router 4 supports the Composition API (useRouter/useRoute), offers stronger TypeScript type inference, and has changed the navigation guard parameters (to/from/next). Vue 3 projects must use Vue Router 4.

📖 Summary

Vue Router 4 is the official routing manager for Vue 3
5 Types of Routes: Static, Dynamic, Nested, Named, Wildcard
5 Navigation Types:router-link,router.push,replace,back,forward
3 Types of Watchers: Global (beforeEach), Route-Specific (beforeEnter), and Component-Internal
Lazy loading of routes (dynamic imports) reduces the time to first view
createWebHistory is recommended; createWebHashHistory is for backward compatibility with older browsers
Nested Routes with children + <router-view />

📝 Exercises

Basic Questions (Difficulty: ⭐)

Implement a simple multi-page SPA:
- 3 pages: Home / About / Contact
- Top navigation + bottom router-view
- Configure the router using vue-router
Advanced Problems (Difficulty: ⭐⭐)

Implementing E-commerce Product Routing:
- /products List Page
- /products/:id Details Page (Dynamic Parameters)
- /products/:id/edit Edit Page
- 404 Handling
Challenge Problem (Difficulty: ⭐⭐⭐)

Implement a complete e-commerce backend routing system:
1. 10+ Pages(home/products/orders/users/settings/login/404 etc.)
2. Nested Routes(/admin/dashboard, /admin/products etc.)
3. Lazy Loading of Routes (Faster First-Screen Load)
4. Log in as a guard (if not logged in, go to /login; if logged in, return to this page)
5. Comprehensive Coverage of 5 Navigation Methods
6. Programmatic Navigation (Click the button to navigate)
7. TypeScript Strongly Typed Routes Configuration

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us

Vue.js: Vue Router

1. What You'll Learn

2. The "404 Nightmare" of a Single-Page Application

(1) Pain Point: 5 pages, 5 instances of duplicate code

(2) Vue Router 4 Solution: 5 Routes + 5 Components

(3) Revenue

3. Route Initialization

(1) Complete initialization code

(2) Registering main.js

(3) Comparison of the Two Major History Models

4. 5 Types of Routing Configurations

(1) Static Routing

(2) Dynamic Routing (Parameters)

(3) Nested Routes

(4) Named Routing

(5) Wildcard 404

5. 5 Types of Navigation

(1) Declarative Navigation (router-link)

(2) Programmatic Navigation (router.push)

(3) 5 Differences Between "push" and "replace"

(4) Comparison of Procedural and Declarative Programming

6. Route Guard (Navigation Guard)

(1) 3 Types of Guards

7. Complete Example: E-commerce Backend Routing System

▶ Example: 1. 5 Types of Routing Configurations

▶ Example: 2. Lazy Loading of Routes (On-Demand Loading of 5 Components)

▶ Example: 3. 5 Types of Navigation

▶ Example: 5. Quick Reference for 5 Common Mistakes

▶ Example: 6. 5 Key Performance Comparisons

❓ FAQ

📖 Summary

📝 Exercises

Vue.js: Vue Router

1. What You'll Learn

2. The "404 Nightmare" of a Single-Page Application

(1) Pain Point: 5 pages, 5 instances of duplicate code

(2) Vue Router 4 Solution: 5 Routes + 5 Components

(3) Revenue

3. Route Initialization

(1) Complete initialization code

(2) Registering main.js

(3) Comparison of the Two Major History Models

4. 5 Types of Routing Configurations

(1) Static Routing

(2) Dynamic Routing (Parameters)

(3) Nested Routes

(4) Named Routing

(5) Wildcard 404

5. 5 Types of Navigation

(1) Declarative Navigation (router-link)

(2) Programmatic Navigation (router.push)

(3) 5 Differences Between "push" and "replace"

(4) Comparison of Procedural and Declarative Programming

6. Route Guard (Navigation Guard)

(1) 3 Types of Guards

(2) Complete example of login protection

7. Complete Example: E-commerce Backend Routing System

▶ Example: 1. 5 Types of Routing Configurations

▶ Example: 2. Lazy Loading of Routes (On-Demand Loading of 5 Components)

▶ Example: 3. 5 Types of Navigation

▶ Example: 4. Complete Login Guard

▶ Example: 5. Quick Reference for 5 Common Mistakes

▶ Example: 6. 5 Key Performance Comparisons

❓ FAQ

📖 Summary

📝 Exercises

🙏 帮我们做得更好