Installation | Vue Router - Get Up and Running in 5 Minutes Flat! ⚡
From zero to routing hero - Add professional navigation capabilities to your Vue.js project in record time!
🎯 Choose Your Installation Method
Vue Router 4 offers multiple installation methods. Whether you're a beginner or an experienced developer, there's always a method that suits you.
📦 Package Manager Installation (Recommended)
🔥 Quick Integration for Existing Projects
If you already have a Vue.js project, you can add Vue Router with just one command:
npm install vue-router@4yarn add vue-router@4pnpm add vue-router@4bun add vue-router@4🆕 New Project Scaffolding
Want to create a brand new project with Vue Router included? Using the official scaffolding tool create-vue is your best choice:
npm create vue@latest my-router-appyarn create vue my-router-apppnpm create vue my-router-appbun create vue my-router-appAfter running the command, you'll see a series of configuration options:
✔ Project name: … my-router-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes ← Choose Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes💡 Pro Tip: Choose the "Add Vue Router" option, and the scaffolding will automatically configure the routing structure and example code for you!
📁 Project Structure Preview
A project created with the scaffolding will include the following routing-related files:
my-router-app/
├── src/
│ ├── router/
│ │ └── index.js # Router configuration file
│ ├── views/ # Page components directory
│ │ ├── HomeView.vue # Home page component
│ │ └── AboutView.vue # About page component
│ └── App.vue # Root component (includes <router-view>)🌐 CDN Method (Quick Experience)
Want to quickly experience Vue Router without installing anything? CDN method is your best choice:
📡 Latest Version (Recommended)
<!-- Always points to the latest version -->
<script src="https://unpkg.com/vue-router@4"></script>🔒 Specific Version (Recommended for Production)
<!-- Specify exact version for more stability -->
<script src="https://unpkg.com/vue-router@4.2.5/dist/vue-router.global.js"></script>🎮 Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Vue Router CDN Example</title>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
<script>
const { createApp } = Vue
const { createRouter, createWebHashHistory } = VueRouter
// Define components
const Home = { template: '<div>Welcome to Home!</div>' }
const About = { template: '<div>This is About page</div>' }
// Define routes
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
// Create router instance
const router = createRouter({
history: createWebHashHistory(),
routes
})
// Create app instance
createApp({}).use(router).mount('#app')
</script>
</body>
</html>🛠️ First Steps After Installation
ES Module Import
After installing with a package manager, you can import Vue Router via ES modules:
import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'
const routes = [
{ path: '/', name: 'Home', component: Home },
{ path: '/about', name: 'About', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default routerRegister in main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.mount('#app')🎉 Verify Successful Installation
After installation, you can verify that Vue Router is working properly through the following methods:
- Check router object: Use
this.$routeroruseRouter()in components - Check browser console: Ensure there are no Vue Router-related error messages
- Test route navigation: Try using
<router-link>or programmatic navigation
🔧 Common Issues & Solutions
❓ Version Compatibility
- Vue Router 4.x → Compatible with Vue 3.x
- Vue Router 3.x → Compatible with Vue 2.x
❓ TypeScript Support
Vue Router 4 includes complete TypeScript type definitions built-in, no need to install additional type packages:
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
const routes: RouteRecordRaw[] = [
{ path: '/', name: 'Home', component: () => import('./views/Home.vue') }
]❓ Vite Project Configuration
If you're using Vite, make sure to configure correctly in vite.config.js:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
})🎯 Next Steps
After installation, we recommend you:
- 📖 Read the Basic Guide - Understand Vue Router's core concepts
- 🎮 Check Example Code - Learn best practices
- 🔍 Explore API Documentation - Deep dive into all features
💡 Pro Tips
We recommend using package manager installation for these benefits:
- 🔄 Automatic dependency management
- 📦 Tree-shaking optimization
- 🛠️ Complete development tool support
- 🔧 TypeScript type hints
Ready to start your Vue Router journey? Let's continue exploring more exciting features! 🚀