当前位置：首页 > VUE

vue路由实现介绍

2026-01-08 07:27:10VUE

Vue 路由实现介绍

Vue Router 是 Vue.js 官方的路由管理器，用于构建单页面应用（SPA）。它通过动态映射组件到路由实现页面无刷新切换，同时支持嵌套路由、路由参数、导航守卫等高级功能。

基本配置

安装 Vue Router：

npm install vue-router

在项目中引入并配置路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes
})

export default router

在 main.js 中挂载路由：

import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

路由视图与导航

在模板中使用 <router-view> 作为路由出口：

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

动态路由匹配

通过冒号 : 定义动态路径参数：

{
  path: '/user/:id',
  component: User
}

在组件中通过 $route.params 访问参数：

vue路由实现介绍

this.$route.params.id

嵌套路由

使用 children 配置嵌套路由：

{
  path: '/user',
  component: User,
  children: [
    { path: 'profile', component: Profile },
    { path: 'posts', component: Posts }
  ]
}

父组件中需包含嵌套的 <router-view>：

<div class="user">
  <router-view></router-view>
</div>

编程式导航

通过 router.push 等方法实现编程式导航：

// 字符串路径
router.push('/home')

// 对象描述
router.push({ path: '/user/123' })

// 带查询参数
router.push({ path: '/register', query: { plan: 'private' } })

导航守卫

全局前置守卫示例：

vue路由实现介绍

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!auth.isLoggedIn()) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

路由懒加载

使用动态导入实现组件懒加载：

const User = () => import('./views/User.vue')

const routes = [
  { path: '/user', component: User }
]

路由模式

支持 hash 模式和 history 模式：

const router = new VueRouter({
  mode: 'history', // 或 'hash'
  routes
})

history 模式需服务器配置支持，避免直接访问路由时返回 404。

路由元信息

通过 meta 字段添加路由元信息：

{
  path: '/admin',
  component: Admin,
  meta: { requiresAuth: true }
}

这些功能组合使 Vue Router 成为构建复杂单页应用的强大工具，同时保持代码结构清晰和可维护性。

标签: 路由 vue

分享给朋友：