Vue 3 路由教程

Vue 3 路由教程

1. 路由基础概念

1.1 什么是路由？

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

1.2 安装vue-router

使用npm安装vue-router:

npm install vue-router@4

2. 基本路由配置

2.1 创建路由实例

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中注册路由

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>

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

3.2 编程式导航

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

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

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

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

4. 路由传参

4.1 动态路由

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

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

4.2 查询参数

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

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

5. 高级路由技巧

5.1 嵌套路由

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

5.2 命名视图

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

5.3 路由守卫

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

6. 常见问题与最佳实践

6.1 处理404页面

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

6.2 路由懒加载

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

结语

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