Vue 3 路由教程

1. 路由基础概念

1.1 什么是路由？

路由是现代单页面应用(SPA)中管理页面导航的核心机制。在Vue 3中，我们主要使用vue-router库来实现路由功能。路由允许您在应用程序中无需重新加载整个页面就可以动态切换视图。

1.2 安装vue-router

使用npm安装vue-router:

bash 复制代码

npm install vue-router@4

2. 基本路由配置

2.1 创建路由实例

javascript 复制代码

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

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

export default router

2.2 在main.js中注册路由

javascript 复制代码

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

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

3. 路由跳转方法

3.1 声明式导航

在模板中使用<router-link>

html 复制代码

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>

3.2 编程式导航

在组件的方法中使用router.push()

javascript 复制代码

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

// 对象形式
this.$router.push({ path: '/about' })

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

4. 路由传参

4.1 动态路由

javascript 复制代码

const routes = [
  // 动态路由参数
  { path: '/user/:id', component: User }
]

// 在组件中获取参数
const route = useRoute()
const userId = route.params.id

4.2 查询参数

javascript 复制代码

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

// 获取查询参数
const keyword = route.query.keyword

5. 高级路由技巧

5.1 嵌套路由

javascript 复制代码

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

5.2 命名视图

javascript 复制代码

const routes = [
  {
    path: '/',
    components: {
      default: Home,
      sidebar: Sidebar,
      content: MainContent
    }
  }
]

5.3 路由守卫

javascript 复制代码

router.beforeEach((to, from, next) => {
  // 全局前置守卫
  if (to.meta.requiresAuth) {
    // 检查登录状态
    if (!isAuthenticated()) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

6. 常见问题与最佳实践

6.1 处理404页面

javascript 复制代码

const routes = [
  // 其他路由...
  { 
    path: '/:pathMatch(.*)*', 
    name: 'NotFound', 
    component: NotFound 
  }
]

6.2 路由懒加载

javascript 复制代码

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

结语

Vue 3路由提供了强大且灵活的导航机制。通过合理使用路由，您可以创建更加动态和用户友好的单页面应用。