vue实现路由控制
Vue 路由控制实现方法
Vue 中路由控制主要通过 Vue Router 实现，以下是几种常见的路由控制方式：
安装 Vue Router
npm install vue-router基本路由配置
在 src/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路由守卫控制 全局前置守卫：
router.beforeEach((to, from, next) => {
const isAuthenticated = localStorage.getItem('token')
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由元信息控制 在路由配置中添加 meta 字段：
{
path: '/dashboard',
name: 'Dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}动态路由控制 根据权限动态添加路由：
const adminRoutes = [
{
path: '/admin',
name: 'Admin',
component: Admin
}
]
if (user.role === 'admin') {
router.addRoute(adminRoutes[0])
}组件内路由控制 在组件中使用路由：
import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
const navigate = () => {
router.push('/about')
}
return { navigate }
}
}404 路由处理 添加通配符路由：
{
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound
}这些方法可以单独使用或组合使用，根据项目需求实现不同的路由控制逻辑。
