当前位置：首页 > VUE

vue实现路由切换

2026-02-19 08:11:10VUE

路由切换的基本实现

在Vue中实现路由切换需要使用Vue Router，这是Vue.js官方的路由管理器。通过Vue Router可以轻松实现单页应用（SPA）中的页面跳转和组件切换。

安装Vue Router：

npm install vue-router

配置路由文件

创建一个路由配置文件（通常命名为router/index.js），定义路由规则：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: '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'

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

使用路由链接和视图

在组件模板中使用<router-link>进行导航，使用<router-view>显示匹配的组件：

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

编程式导航

除了使用<router-link>，也可以通过JavaScript代码实现路由跳转：

methods: {
  goToAbout() {
    this.$router.push('/about')
  }
}

路由传参

可以通过动态路由或查询参数传递数据：

// 路由配置
{
  path: '/user/:id',
  name: 'User',
  component: User
}

// 跳转时传递参数
this.$router.push({ name: 'User', params: { id: 123 } })
// 或
this.$router.push({ path: '/user/123' })

// 接收参数
this.$route.params.id

导航守卫

可以使用导航守卫控制路由跳转：

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

路由懒加载

优化性能，按需加载路由组件：

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

嵌套路由

实现多级路由嵌套：

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

vue实现路由切换