vue实现路由管理
Vue 路由管理实现方法
Vue 路由管理通常通过 vue-router 库实现，以下是具体实现方式：
安装 vue-router
通过 npm 或 yarn 安装最新版本：
npm install vue-router@4
# 或
yarn add vue-router@4基本路由配置
在项目中创建路由配置文件（通常为 router/index.js）：
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(process.env.BASE_URL),
routes
})
export default router路由视图渲染
在主入口文件（如 main.js）中引入路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')在根组件模板中添加 <router-view>：
<template>
<div id="app">
<router-view/>
</div>
</template>导航实现
使用 <router-link> 组件进行导航：
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>编程式导航：
// 字符串路径
router.push('/about')
// 带查询参数
router.push({ path: '/about', query: { id: 1 } })
// 命名路由
router.push({ name: 'About' })动态路由匹配
通过冒号 : 定义动态路径参数：
{
path: '/user/:id',
component: User
}获取路由参数：
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)路由守卫
全局前置守卫：
router.beforeEach((to, from, next) => {
// 验证逻辑
next()
})组件内守卫：
import { onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave((to, from) => {
// 离开确认逻辑
})嵌套路由
定义子路由：
{
path: '/parent',
component: Parent,
children: [
{ path: 'child', component: Child }
]
}父组件模板中需要包含 <router-view>：
<template>
<div>
<h2>Parent Component</h2>
<router-view/>
</div>
</template>路由懒加载
使用动态导入实现组件懒加载：
{
path: '/lazy',
component: () => import('../views/Lazy.vue')
}路由元信息
定义路由元字段：
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true }
}在导航守卫中访问：
router.beforeEach((to) => {
if (to.meta.requiresAuth && !isAuthenticated) {
return '/login'
}
})
