Vue Router基础路由[编辑 | 编辑源代码]

Vue Router是Vue.js官方的路由管理器，用于构建单页面应用程序（SPA）。它允许您在不刷新页面的情况下，通过URL变化来切换视图组件。

核心概念[编辑 | 编辑源代码]

什么是前端路由？[编辑 | 编辑源代码]

传统多页应用每次导航都会导致页面刷新，而SPA通过前端路由实现：

URL变化不引发页面刷新
根据URL映射到不同组件
浏览器历史记录管理

基本组成[编辑 | 编辑源代码]

Vue Router包含三个核心部分： 1. 路由配置：定义路径与组件的映射关系 2. 路由器实例：创建路由管理器 3. 路由视图：<router-view>组件作为渲染出口

安装与基本配置[编辑 | 编辑源代码]

安装[编辑 | 编辑源代码]

通过npm安装：

npm install vue-router@4

基本配置示例[编辑 | 编辑源代码]

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
})

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

路由定义详解[编辑 | 编辑源代码]

静态路由[编辑 | 编辑源代码]

基本路径匹配：

routes: [
  { path: '/', component: Home },
  { path: '/products', component: ProductList }
]

动态路由[编辑 | 编辑源代码]

使用冒号(:)定义动态段：

routes: [
  // 匹配 /user/123
  { path: '/user/:id', component: UserDetail }
]

访问动态参数：

// 在组件中
this.$route.params.id // 或
import { useRoute } from 'vue-router'
const route = useRoute()
route.params.id

嵌套路由[编辑 | 编辑源代码]

使用children属性：

routes: [
  {
    path: '/dashboard',
    component: Dashboard,
    children: [
      { path: '', component: DashboardHome }, // /dashboard
      { path: 'settings', component: DashboardSettings } // /dashboard/settings
    ]
  }
]

导航方式[编辑 | 编辑源代码]

声明式导航[编辑 | 编辑源代码]

使用<router-link>组件：

<router-link to="/">首页</router-link>
<router-link :to="{ path: '/about' }">关于</router-link>

编程式导航[编辑 | 编辑源代码]

通过路由器实例：

// 方法1
this.$router.push('/about')

// 方法2 (Composition API)
import { useRouter } from 'vue-router'
const router = useRouter()
router.push('/about')

// 带参数
router.push({ path: '/user', query: { id: '123' } })

实际案例：电商网站路由[编辑 | 编辑源代码]

路由配置[编辑 | 编辑源代码]

const routes = [
  {
    path: '/',
    component: Layout,
    children: [
      { path: '', component: Home },
      { path: 'products', component: ProductList },
      { path: 'products/:id', component: ProductDetail },
      { path: 'cart', component: ShoppingCart },
      { path: 'checkout', component: Checkout }
    ]
  },
  { path: '/login', component: Login }
]

路由守卫示例[编辑 | 编辑源代码]

添加全局前置守卫：

router.beforeEach((to, from) => {
  if (to.path === '/checkout' && !isAuthenticated) {
    return '/login'
  }
})

常见问题[编辑 | 编辑源代码]

路由匹配优先级[编辑 | 编辑源代码]

路由匹配顺序按照定义顺序，越具体的路径应该越靠后：

// 错误顺序
routes: [
  { path: '/user/:id', component: UserDetail },
  { path: '/user/create', component: UserCreate } // 永远不会匹配
]

// 正确顺序
routes: [
  { path: '/user/create', component: UserCreate },
  { path: '/user/:id', component: UserDetail }
]

路由模式[编辑 | 编辑源代码]

Vue Router支持两种历史模式：

createWebHistory - 使用干净的URL（需要服务器配置）
createWebHashHistory - 使用hash模式（URL带#）

进阶提示[编辑 | 编辑源代码]

使用props: true将路由参数作为组件props传递
利用meta字段存储路由元信息
对于大型应用，考虑使用路由懒加载

// 懒加载示例
const UserDetail = () => import('./views/UserDetail.vue')

页面模块:Message box/ambox.css没有内容。

总结[编辑 | 编辑源代码]

Vue Router是构建Vue单页应用的核心工具，通过本教程您已学习：

路由基本配置方法
静态/动态路由定义
嵌套路由结构
声明式和编程式导航
实际应用场景配置

下一步可以学习路由守卫、路由过渡动画等高级特性。