当前位置：首页 > VUE

vue路由实现

2026-01-12 20:14:34VUE

Vue 路由实现方法

安装 Vue Router

在项目中安装 Vue Router 依赖包：

npm install vue-router

配置路由

在 src 目录下创建 router/index.js 文件，配置路由规则：

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

注册路由

在 main.js 中导入并注册路由：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

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

使用路由视图

在 App.vue 中添加 <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,
  props: true
}

在组件中通过 props 接收参数：

<template>
  <div>User ID: {{ id }}</div>
</template>

<script>
export default {
  props: ['id']
}
</script>

导航守卫

添加全局前置守卫：

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

路由懒加载

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

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

嵌套路由

配置子路由：

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

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

命名路由

为路由指定名称：

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

通过名称导航：

<router-link :to="{ name: 'user', params: { id: 123 }}">User</router-link>

编程式导航

在组件方法中使用路由跳转：

this.$router.push('/home')
this.$router.replace('/login')
this.$router.go(-1)

路由元信息

添加路由元数据：

vue路由实现

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

标签: 路由 vue

分享给朋友：

vue实现绑卡的原理

Vue 实现绑卡的原理 Vue 实现绑卡功能通常涉及前端表单处理、数据绑定、验证以及和后端 API 的交互。以下是实现绑卡功能的核心原理和步骤：数据绑定与表单处理 Vue 通过 v-model 指…

vue功能实现

Vue 功能实现指南 Vue.js 是一个渐进式 JavaScript 框架，广泛用于构建用户界面。以下是 Vue 功能的常见实现方法。数据绑定 Vue 的核心功能之一是数据绑定，通过 v-mod…

vue实现图册

Vue实现图册功能在Vue中实现图册功能通常涉及图片展示、切换、缩放等交互效果。以下是常见的实现方法和关键代码示例：基础图册组件结构使用Vue单文件组件构建基础结构： <templat…

vue 实现全屏

Vue 实现全屏功能在 Vue 中实现全屏功能可以通过浏览器提供的 Fullscreen API 完成。以下是一个完整的实现方案：安装依赖（可选）如果需要跨浏览器兼容性更好，可以安装…

vue 实现modal

Vue 实现 Modal 的方法使用 Vue 原生组件通过 Vue 的组件系统可以轻松实现 Modal。创建一个可复用的 Modal 组件，通过 props 控制显示与隐藏。 <templ…

vue实现视频

Vue 实现视频播放的方法在 Vue 项目中实现视频播放可以通过多种方式完成，以下是几种常见的方法：使用 HTML5 的 <video> 标签在 Vue 组件中直接使用 HTML…

vue路由实现