当前位置：首页 > VUE

vue路由实现

2026-01-07 19:05:58VUE

Vue 路由实现

Vue Router 是 Vue.js 的官方路由管理器，用于构建单页面应用（SPA）。以下是 Vue Router 的基本实现步骤和核心功能。

安装 Vue Router

通过 npm 或 yarn 安装 Vue Router：

npm install vue-router

或

yarn add vue-router

基本配置

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

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

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

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

export default router

路由模式

Vue Router 支持两种路由模式：

hash 模式：URL 中有 #，兼容性好。
history 模式：URL 无 #，需服务器支持。

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

路由视图

在根组件中使用 <router-view> 显示路由内容：

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

动态路由

通过 : 定义动态路由参数：

{
  path: '/user/:id',
  name: 'User',
  component: () => import('./views/User.vue')
}

获取参数：

this.$route.params.id

嵌套路由

通过 children 配置嵌套路由：

{
  path: '/user',
  component: () => import('./views/User.vue'),
  children: [
    {
      path: 'profile',
      component: () => import('./views/Profile.vue')
    }
  ]
}

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

路由守卫

全局守卫：

router.beforeEach((to, from, next) => {
  // 逻辑处理
  next()
})

组件内守卫：

{
  beforeRouteEnter(to, from, next) {
    // 逻辑处理
    next()
  }
}

懒加载

通过动态导入实现路由懒加载：

component: () => import('./views/About.vue')

命名视图

多个 <router-view> 显示不同组件：

{
  path: '/',
  components: {
    default: Home,
    sidebar: Sidebar
  }
}

模板中使用：

<router-view name="sidebar"/>

以上是 Vue Router 的核心功能实现方式，可根据项目需求灵活配置。

vue路由实现

标签: 路由 vue

分享给朋友：

用vue实现搜索查询

实现搜索查询的基本思路在Vue中实现搜索查询功能通常涉及以下几个核心部分：数据绑定、事件监听、过滤逻辑和UI反馈。以下是一个完整的实现方案。数据绑定与输入框创建一个Vue组件，包含一个输入框…

vue实现展开与收起

Vue 实现展开与收起功能在 Vue 中实现展开与收起功能可以通过多种方式完成，以下是一些常见的方法：使用 v-show 或 v-if 控制显示通过 Vue 的指令 v-show 或 v-i…

vue前端分页怎么实现

前端分页实现方法在Vue中实现前端分页通常涉及数据分割和页面控制逻辑。以下是常见的实现方式：使用计算属性分页通过计算属性对数据进行切片处理： computed: { paginate…

vue实现键盘

Vue 实现键盘功能在Vue中实现键盘功能通常涉及监听键盘事件、处理输入以及渲染虚拟键盘界面。以下是几种常见的实现方式：监听键盘事件通过@keydown或@keyup指令监听键盘事件，适用于…

vue vnode实现

Vue VNode 实现原理 VNode（Virtual Node）是 Vue 的核心概念之一，用于描述真实 DOM 的轻量级虚拟表示。VNode 的实现涉及以下关键点： VNode 的基本结构 V…

vue实现画图

Vue 实现画图功能在 Vue 中实现画图功能通常需要结合 HTML5 的 <canvas> 元素或第三方库。以下是几种常见的方法：使用原生 Canvas API 通过 Vue 直…

vue路由实现