vue路由实现思路
Vue 路由实现思路
基础路由配置
在 Vue 项目中，通过 vue-router 实现路由功能。安装依赖后，在 src/router/index.js 中配置路由表：
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router动态路由匹配
通过冒号 : 定义动态路径参数，组件内可通过 $route.params 访问：
{
path: '/user/:id',
component: () => import('../views/User.vue')
}嵌套路由
使用 children 属性实现嵌套路由，父组件需包含 <router-view>：
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}编程式导航
通过 router.push 或 router.replace 跳转路由：
// 字符串路径
router.push('/about')
// 带参数的对象
router.push({ path: '/user/123' })
// 命名路由
router.push({ name: 'user', params: { id: '123' } })路由守卫
全局守卫或路由独享守卫控制导航：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth) {
// 验证逻辑
} else {
next()
}
})路由懒加载
使用动态 import() 语法实现按需加载：
component: () => import('../views/HeavyComponent.vue')路由元信息
通过 meta 字段附加路由信息：
{
path: '/admin',
meta: { requiresAuth: true }
}滚动行为
自定义路由切换时的滚动位置：
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
return savedPosition || { top: 0 }
}
})
