Setting the file. One moment.
Skill 15 · Vue Router Best Practices
Subchapter 15.8
reference/router-use-vue-router-for-production.mdMarkdown5 KBView on GitHub
Impact: LOW - While you can implement basic routing with hash changes and dynamic components, the official Vue Router library should be used for any production single-page application. It provides essential features like navigation guards, nested routes, lazy loading, and proper browser history integration that are tedious and error-prone to implement manually.
<!-- Only for: learning, prototypes, or micro-apps with 2-3 pages -->
<script setup>
import { ref, computed } from 'vue'
import Home from './Home.vue'
import About from './About.vue'
const routes = { '/': Home, '/about': About }
const currentPath = ref(window.location.hash.slice(1) || '/')
window.addEventListener('hashchange', () => {
currentPath.value = window.location.hash.slice(1) || '/'
})
const currentView = computed(() => routes[currentPath.value])
</script>
<template>
<nav>
<a href="#/">Home</a>
<a href="#/about">About</a>
</nav>
<component :is="currentView" />
</template>| Feature | Simple Routing | Vue Router |
|---|---|---|
| Navigation guards | Manual, error-prone | Built-in, composable |
| Nested routes | Complex to implement | Native support |
| Route params | Parse manually | Automatic extraction |
| Lazy loading | DIY with dynamic imports | Built-in with code splitting |
| History mode (clean URLs) | Requires server config + manual | Built-in |
| Scroll behavior | Manual | Configurable |
| Route transitions | DIY | Integrated with Transition |
| Active link styling | Manual class toggling | router-link-active class |
| Programmatic navigation | location.hash = ... | router.push(), router.replace() |
| Route meta fields | N/A | Built-in |
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue'), // Lazy loaded
meta: { requiresAuth: false }
},
{
path: '/dashboard',
name: 'Dashboard',
component: () => import('@/views/Dashboard.vue'),
meta: { requiresAuth: true },
children: [
{
path: 'settings',
name: 'Settings',
component: () => import('@/views/Settings.vue')
}
]
},
{
path: '/users/:id',
name: 'UserProfile',
component: () => import('@/views/UserProfile.vue'),
props: true // Pass params as props
},
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: () => import('@/views/NotFound.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes,
scrollBehavior(to, from, savedPosition) {
return savedPosition || { top: 0 }
}
})
// Global navigation guard
router.beforeEach((to, from) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
return { name: 'Login', query: { redirect: to.fullPath } }
}
})
export default router// main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App)
.use(router)
.mount('#app')<!-- App.vue -->
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/dashboard">Dashboard</router-link>
</nav>
<router-view v-slot="{ Component }">
<transition name="fade" mode="out-in">
<component :is="Component" />
</transition>
</router-view>
</template>// Data Loading API (Vue Router 4.2+)
const routes = [
{
path: '/users/:id',
component: UserProfile,
// Load data at route level
loader: async (route) => {
return { user: await fetchUser(route.params.id) }
}
}
]
// View Transitions API integration
const router = createRouter({
// Enable native browser view transitions
// Requires browser support (Chrome 111+)
})