vue实现前端路由
Vue 前端路由实现方法
Vue 前端路由通常通过 vue-router 库实现，以下是核心实现步骤和代码示例：
安装 vue-router
通过 npm 或 yarn 安装路由库：
npm install vue-router基础路由配置
在项目中创建路由配置文件（如 src/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(),
routes
})
export default router挂载路由到 Vue 实例
在 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')路由视图与导航
在组件中使用 <router-view> 和 <router-link>：
<template>
<div>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
</template>动态路由匹配
通过冒号 : 定义动态参数：
{
path: '/user/:id',
component: User
}在组件中通过 $route.params.id 获取参数。
导航守卫
实现路由跳转前的逻辑控制：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由懒加载
优化性能，按需加载组件：
const User = () => import('../views/User.vue')嵌套路由
通过 children 属性实现嵌套视图：
{
path: '/dashboard',
component: Dashboard,
children: [
{ path: 'profile', component: Profile }
]
}编程式导航
通过 router.push 实现代码跳转：
this.$router.push('/about')
// 或带参数
this.$router.push({ name: 'User', params: { id: 123 } })路由模式选择
支持两种历史模式：
createWebHistory: 需要服务器配置支持（如 HTML5 模式）createWebHashHistory: 使用 URL hash（无需服务器配置）
const router = createRouter({
history: createWebHashHistory(), // 或 createWebHistory()
routes
})注意事项
- 生产环境需配置服务器支持 HTML5 History 模式
- 动态路由参数变化时，组件实例会复用，需监听
$route对象 - 导航守卫可应用于全局、单个路由或组件级别
通过以上方法可实现完整的 Vue 前端路由功能，具体可根据项目需求选择配置方式。
