Vue2 和 Vue3 中使用 Vue Router 的详细过程

Vue2 中使用 Vue Router 的完整过程

1. 安装 Vue Router

npm install vue-router@3
# 或
yarn add vue-router@3

2. 创建路由配置文件

  在 src/router/index.js 中创建路由配置：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'// 1. 安装路由插件
Vue.use(VueRouter)// 2. 定义路由配置
const routes = [{path: '/',name: 'Home',component: Home,meta: { requiresAuth: true } // 可选：添加路由元信息},{path: '/about',name: 'About',component: About},{path: '/:pathMatch(.*)*', // 404页面redirect: '/'}
]// 3. 创建路由实例
const router = new VueRouter({mode: 'history', // 可选：'hash' 或 'history'base: process.env.BASE_URL,routes,linkActiveClass: 'active-link', // 可选：自定义激活的链接类名linkExactActiveClass: 'exact-active-link' // 可选：自定义精确匹配的激活类名
})// 4. 路由守卫示例（可选）
router.beforeEach((to, from, next) => {console.log(`从 ${from.path} 导航到 ${to.path}`)next() // 必须调用 next() 以继续导航
})export default router

3. 在主入口文件中使用路由

  在 src/main.js 中：

import Vue from 'vue'
import App from './App.vue'
import router from './router'new Vue({router, // 注入路由render: h => h(App)
}).$mount('#app')

4. 在组件中使用路由

<template><div><!-- 路由链接 --><router-link to="/" exact>首页</router-link><router-link to="/about">关于</router-link><!-- 路由视图 --><router-view></router-view><!-- 编程式导航 --><button @click="goToAbout">跳转到关于页</button></div>
</template><script>
export default {methods: {goToAbout() {this.$router.push('/about')// 或 this.$router.replace('/about') 替换当前路由}},// 路由守卫（组件内）beforeRouteEnter(to, from, next) {console.log('进入组件前')next()},beforeRouteLeave(to, from, next) {console.log('离开组件前')next()}
}
</script>

Vue3 中使用 Vue Router 的完整过程

1. 安装 Vue Router

npm install vue-router@4
# 或
yarn add vue-router@4

2. 创建路由配置文件

  在 src/router/index.js 中：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'// 1. 定义路由配置
const routes = [{path: '/',name: 'Home',component: Home,meta: { requiresAuth: true } // 可选：添加路由元信息},{path: '/about',name: 'About',component: About},{path: '/:pathMatch(.*)*', // 404页面redirect: '/'}
]// 2. 创建路由实例
const router = createRouter({history: createWebHistory(process.env.BASE_URL), // 或 createWebHashHistory()routes,linkActiveClass: 'active-link', // 可选：自定义激活的链接类名linkExactActiveClass: 'exact-active-link' // 可选：自定义精确匹配的激活类名
})// 3. 路由守卫示例（可选）
router.beforeEach((to, from, next) => {console.log(`从 ${from.path} 导航到 ${to.path}`)next() // 必须调用 next() 以继续导航
})export default router

3. 在主入口文件中使用路由

  在 src/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')

4. 在组件中使用路由（组合式 API）

<template><div><!-- 路由链接 --><router-link to="/" exact>首页</router-link><router-link to="/about">关于</router-link><!-- 路由视图 --><router-view></router-view><!-- 编程式导航 --><button @click="goToAbout">跳转到关于页</button></div>
</template><script setup>
import { useRouter } from 'vue-router'const router = useRouter()const goToAbout = () => {router.push('/about')// 或 router.replace('/about') 替换当前路由
}// 路由守卫（组合式 API）
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'onBeforeRouteLeave((to, from) => {console.log('离开组件前')
})onBeforeRouteUpdate((to, from) => {console.log('路由更新前')
})
</script>

关键区别总结

特性	Vue2 (Vue Router 3)	Vue3 (Vue Router 4)
安装命令	npm install vue-router@3	npm install vue-router@4
创建路由	new VueRouter()	createRouter()
历史模式	mode: 'history'	createWebHistory()
路由注入	直接在 Vue 构造函数中	app.use(router)
组件内路由	选项式 API	组合式 API (useRouter)
路由守卫	beforeRouteEnter 等	onBeforeRouteLeave 等

最佳实践

1. 路由懒加载：使用动态导入提高性能

   component: () => import('../views/About.vue')
   

2. 路由元信息：用于权限控制等

   meta: { requiresAuth: true }
   

3. 404 处理：始终配置通配符路由

4. 命名视图：复杂布局时使用

   routes: [{path: '/',components: {default: Home,sidebar: Sidebar}}
   ]
   

5. 滚动行为：控制路由切换时的滚动位置

   const router = createRouter({scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { top: 0 }}}
   })