vue导航实现
Vue 导航实现方法
使用 Vue Router 实现基础导航
安装 Vue Router 依赖：
npm install vue-router在项目中配置路由：
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在主文件中引入并使用路由：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')在模板中使用路由链接和视图：
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>动态路由实现
定义带参数的路由：
const routes = [
{ path: '/user/:id', component: User }
]在组件中获取路由参数：
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)导航守卫实现
全局前置守卫：
router.beforeEach((to, from, next) => {
if (to.meta.requiresAuth && !isAuthenticated) {
next('/login')
} else {
next()
}
})路由独享守卫：
const routes = [
{
path: '/admin',
component: Admin,
beforeEnter: (to, from, next) => {
// 验证逻辑
}
}
]嵌套路由实现
定义嵌套路由：
const routes = [
{
path: '/user/:id',
component: User,
children: [
{ path: 'profile', component: Profile },
{ path: 'posts', component: Posts }
]
}
]在父组件中添加子路由视图：
<router-view></router-view>编程式导航实现
在组件方法中使用导航：
import { useRouter } from 'vue-router'
const router = useRouter()
function navigate() {
router.push('/about')
// 或 router.replace('/about')
// 或 router.go(-1)
}路由懒加载优化
使用动态导入实现懒加载：
const routes = [
{
path: '/about',
component: () => import('./views/About.vue')
}
]导航样式处理
为活动路由添加样式：
<router-link
to="/about"
active-class="active-link"
exact-active-class="exact-active-link"
>
About
</router-link>路由元信息
定义路由元数据：
const routes = [
{
path: '/admin',
component: Admin,
meta: { requiresAuth: true }
}
]滚动行为控制
自定义滚动行为：
const router = createRouter({
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { top: 0 }
}
}
})
