当前位置：首页 > 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中循环数组主要通过v-for指令实现，以下是几种常见用法：基本数组循环使用v-for指令遍历数组，可以通过(item, index)的语法获取当前项和索引值：…

vue实现缩放

Vue 实现缩放的方法在 Vue 中实现缩放功能可以通过多种方式完成，以下是一些常见的方法：使用 CSS transform 属性通过 CSS 的 transform: scale() 属性可…

vue 实现级联

Vue 实现级联选择器级联选择器（Cascader）常用于省市区选择、分类选择等场景。Vue 中可以通过 Element UI、Ant Design Vue 等 UI 库实现，也可以手动封装。使…

vue实现计算

Vue 实现计算的方法在 Vue 中实现计算功能可以通过多种方式完成，主要包括计算属性（computed）、方法（methods）和侦听器（watch）。以下是具体的实现方法：计算属性（Comp…

vue实现mui

使用 Vue 实现 MUI（Material-UI）风格的界面 Vue 本身不直接提供 MUI（Material Design）组件，但可以通过集成第三方库或手动实现来达到类似效果。以下是几种常见方法…

实现vue框架

Vue框架的基本实现 Vue是一个渐进式JavaScript框架，用于构建用户界面。以下是实现Vue框架的基本步骤：安装Vue 通过CDN引入Vue是最简单的方式： <script src…

vue路由实现