vue的路由实现
Vue 路由实现方式
Vue 路由通常通过 vue-router 库实现，以下是核心实现方法：
安装 vue-router
npm install vue-router基本路由配置
在项目中创建路由配置文件（如 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路由视图与导航
在主入口文件（如 main.js）中引入路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')在组件模板中使用路由：
<template>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</template>动态路由匹配
通过冒号 : 定义动态路径参数：
{
path: '/user/:id',
component: () => import('../views/User.vue')
}在组件中访问参数：
this.$route.params.id // Vue 2
import { useRoute } from 'vue-router'
const route = useRoute()
route.params.id // Vue 3嵌套路由
使用 children 属性实现嵌套路由：
{
path: '/parent',
component: Parent,
children: [
{
path: 'child',
component: Child
}
]
}父组件模板中需要包含 <router-view>：
<template>
<div>
<h2>Parent</h2>
<router-view></router-view>
</div>
</template>路由守卫
实现导航控制：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})组件内守卫：
export default {
beforeRouteEnter(to, from, next) {
// 在渲染该组件的对应路由被验证前调用
},
beforeRouteUpdate(to, from, next) {
// 在当前路由改变但该组件被复用时调用
}
}路由懒加载
使用动态导入实现代码分割：
const About = () => import('../views/About.vue')命名路由与命名视图
命名路由便于维护：
<router-link :to="{ name: 'Home' }">Home</router-link>命名视图实现多视图布局：
<router-view name="header"></router-view>
<router-view></router-view>
<router-view name="footer"></router-view>配置示例：
{
path: '/',
components: {
default: Home,
header: Header,
footer: Footer
}
}
