vue实现router案例
以下是一个基于 Vue Router 的完整实现案例，涵盖路由配置、动态路由、导航守卫等核心功能：
安装 Vue Router
通过 npm 或 yarn 安装 Vue Router 依赖：
npm install vue-router@4基础路由配置
在 src/router/index.js 中创建路由实例：
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/about',
name: 'about',
component: () => import('../views/AboutView.vue')
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router动态路由匹配
通过冒号 : 定义动态参数：
{
path: '/user/:id',
component: () => import('../views/UserView.vue')
}在组件中通过 useRoute() 获取参数：
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)路由导航
在模板中使用 <router-link> 进行声明式导航：
<router-link to="/">Home</router-link>
<router-link :to="{ name: 'about' }">About</router-link>通过编程式导航跳转：
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/about')嵌套路由
使用 children 属性定义嵌套路由：
{
path: '/dashboard',
component: DashboardLayout,
children: [
{
path: '',
component: DashboardHome
},
{
path: 'settings',
component: DashboardSettings
}
]
}父级组件中需要包含 <router-view> 占位符。
导航守卫
全局前置守卫示例：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated()) {
next('/login')
} else {
next()
}
})路由独享守卫：
{
path: '/admin',
component: AdminView,
beforeEnter: (to, from, next) => {
// 校验逻辑
}
}路由元信息
定义路由时添加 meta 字段：
{
path: '/profile',
component: ProfileView,
meta: { requiresAuth: true }
}懒加载路由
使用动态 import 实现组件懒加载：
component: () => import('../views/LazyView.vue')路由过渡动画
在 <router-view> 外包裹 <transition>：
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>滚动行为控制
创建路由时配置 scrollBehavior：
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
return savedPosition || { top: 0 }
}
})该实现案例覆盖了 Vue Router 的主要功能点，可根据实际项目需求进行组合和扩展。注意 Vue 3 需要使用 Vue Router 4.x 版本，与 Vue 2 的 Vue Router 3.x 在 API 上有部分差异。
