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'
import About from '../views/About.vue'
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router在组件中使用路由链接：
<template>
<nav>
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template>动态路由实现
配置带参数的路由：
{
path: '/user/:id',
component: User,
props: true
}在组件中获取参数：
export default {
props: ['id'],
created() {
console.log(this.id)
}
}导航守卫控制访问权限
添加全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (!auth.isAuthenticated()) {
next('/login')
} else {
next()
}
} else {
next()
}
})配置路由元信息：
{
path: '/dashboard',
component: Dashboard,
meta: { requiresAuth: true }
}嵌套路由实现
配置嵌套路由：
{
path: '/user/:id',
component: User,
children: [
{
path: 'profile',
component: UserProfile
},
{
path: 'posts',
component: UserPosts
}
]
}在父组件中添加 <router-view>：
<div class="user">
<h2>User {{ $route.params.id }}</h2>
<router-view></router-view>
</div>编程式导航
在组件方法中导航：
methods: {
goToAbout() {
this.$router.push('/about')
},
goBack() {
this.$router.go(-1)
}
}带参数的导航：
this.$router.push({ name: 'user', params: { id: 123 } })响应式导航菜单
根据路由状态动态设置活动样式：
<router-link
to="/about"
active-class="active-link"
exact-active-class="exact-active-link"
>
About
</router-link>自定义导航菜单激活状态：
computed: {
isActive() {
return this.$route.path === this.link
}
}这些方法涵盖了 Vue 导航的主要实现方式，可以根据具体需求选择适合的方案或组合使用多种技术。
