vue实现路由组件
Vue 路由组件实现方法
Vue 中实现路由组件通常使用 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'
createApp(App).use(router).mount('#app')使用路由组件
在 App.vue 中使用 <router-view> 和 <router-link>：
<template>
<div id="app">
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</div>
</template>动态路由
配置带参数的路由：
{
path: '/user/:id',
name: 'User',
component: User
}在组件中获取参数：
this.$route.params.id路由守卫
添加全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})嵌套路由
配置嵌套路由：
{
path: '/user',
component: User,
children: [
{
path: 'profile',
component: Profile
}
]
}懒加载路由
使用动态导入实现懒加载：
const User = () => import('../views/User.vue')通过以上步骤即可在 Vue 项目中实现完整的路由功能。
