vue实现router案例
Vue Router 基础实现案例
安装 Vue Router 依赖包
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在 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')创建路由视图组件
Home.vue 示例
<template>
<div>
<h1>Home Page</h1>
<router-link to="/about">Go to About</router-link>
</div>
</template>About.vue 示例
<template>
<div>
<h1>About Page</h1>
<router-link to="/">Go to Home</router-link>
</div>
</template>在 App.vue 中添加路由出口
<template>
<div id="app">
<router-view/>
</div>
</template>动态路由实现
修改路由配置
{
path: '/user/:id',
name: 'User',
component: () => import('../views/User.vue')
}User.vue 组件中获取参数
<template>
<div>
<h1>User ID: {{ $route.params.id }}</h1>
</div>
</template>编程式导航
在组件方法中使用
methods: {
goToAbout() {
this.$router.push('/about')
},
goToUser(id) {
this.$router.push({ name: 'User', params: { id } })
}
}路由守卫示例
全局前置守卫
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由独享守卫
{
path: '/profile',
name: 'Profile',
component: Profile,
beforeEnter: (to, from, next) => {
// 验证逻辑
}
}嵌套路由配置
父路由配置
{
path: '/dashboard',
component: Dashboard,
children: [
{
path: '',
component: DashboardHome
},
{
path: 'settings',
component: DashboardSettings
}
]
}父组件模板
<template>
<div>
<h1>Dashboard</h1>
<router-view/>
</div>
</template>
