当前位置：首页 > VUE

vue导航实现

2026-03-27 23:35:20VUE

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)

导航守卫实现

全局前置守卫：

vue导航实现

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>

编程式导航实现

在组件方法中使用导航：

vue导航实现

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 }
    }
  }
})

标签: vue