当前位置：首页 > VUE

vue router怎么实现

2026-03-30 12:18:02VUE

Vue Router 的实现方法

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。以下是实现 Vue Router 的详细步骤：

安装 Vue Router

在项目中安装 Vue Router 可以通过 npm 或 yarn 完成。运行以下命令之一：

npm install vue-router

yarn add vue-router

引入和配置 Vue Router

在项目的入口文件（通常是 main.js 或 main.ts）中引入 Vue Router 并进行配置：

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

const app = createApp(App)
app.use(router)
app.mount('#app')

定义路由组件

创建路由组件，例如 Home.vue 和 About.vue，并在路由配置中引用它们：

import Home from './views/Home.vue'
import About from './views/About.vue'

使用 `<router-view>` 和 `<router-link>`

在应用的根组件（通常是 App.vue）中，使用 <router-view> 作为路由出口，并使用 <router-link> 进行导航：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

动态路由匹配

动态路由可以通过在路径中使用冒号 : 实现：

vue router怎么实现

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/user/:id', component: User }
  ]
})

在组件中可以通过 $route.params.id 访问动态参数。

嵌套路由

嵌套路由通过 children 属性实现：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/user',
      component: User,
      children: [
        { path: 'profile', component: UserProfile },
        { path: 'posts', component: UserPosts }
      ]
    }
  ]
})

在父路由组件中使用 <router-view> 显示子路由。

vue router怎么实现

导航守卫

导航守卫用于在路由跳转前或跳转后执行逻辑：

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login')
  } else {
    next()
  }
})

路由懒加载

通过动态导入实现路由懒加载，减少初始加载时间：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('./views/Home.vue') },
    { path: '/about', component: () => import('./views/About.vue') }
  ]
})

编程式导航

通过 router.push 或 router.replace 实现编程式导航：

router.push('/about')
router.replace('/about')

路由元信息

通过 meta 字段传递路由元信息：

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/admin', component: Admin, meta: { requiresAuth: true } }
  ]
})

以上步骤涵盖了 Vue Router 的基本实现方法，适用于大多数单页面应用开发场景。