当前位置：首页 > VUE

vue实现路由控制

2026-01-18 18:44:51VUE

Vue 路由控制实现方法

在 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'

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

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

路由守卫控制权限

通过全局前置守卫 beforeEach 实现权限控制：

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

在路由配置中定义元信息：

const routes = [
  { 
    path: '/dashboard', 
    component: Dashboard,
    meta: { requiresAuth: true } 
  }
]

动态路由加载

根据用户权限动态添加路由：

const adminRoutes = [
  { path: '/admin', component: AdminPanel }
]

router.addRoute(adminRoutes)

路由懒加载

通过动态导入实现组件懒加载：

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

嵌套路由配置

实现多级路由嵌套：

const routes = [
  {
    path: '/user',
    component: UserLayout,
    children: [
      { path: 'profile', component: Profile },
      { path: 'posts', component: UserPosts }
    ]
  }
]

编程式导航

在组件中通过代码控制路由跳转：

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

// 带查询参数
this.$router.push({ path: '/search', query: { q: 'vue' } })

// 命名路由
this.$router.push({ name: 'user', params: { id: 123 } })

路由传参方式

通过 props 解耦路由参数：

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true // 将路由参数作为 props 传递
  }
]

在组件中接收：

export default {
  props: ['id']
}

404 路由处理

捕获未匹配的路由：

const routes = [
  { path: '/:pathMatch(.*)*', component: NotFound }
]

滚动行为控制

自定义路由切换时的滚动位置：

vue实现路由控制

const router = createRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { top: 0 }
    }
  }
})