Vue 路由

对于大多数单页应用 (Single-Page Application, SPA)，我们需要一种方法来将用户导航到应用的不同部分，同时不刷新整个页面。Vue Router 是 Vue.js 的官方路由管理器，它与 Vue 的核心深度集成，让构建带有路由功能的 SPA 变得轻而易举。

安装

如果你在创建项目时通过 create-vue 选择了添加 Vue Router，那么一切都已经为你配置好了。如果没有，你可以手动安装它：

npm install vue-router@4

然后，你需要创建一个路由实例并将其挂载到 Vue 应用上。

src/router/index.js

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

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // 路由懒加载
    component: () => import('../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

src/main.js

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

const app = createApp(App)

app.use(router) // 告诉 Vue 应用使用路由实例

app.mount('#app')

核心概念

1. `router-link`

router-link 是一个用于声明式导航的组件。它会被渲染成一个带有正确 href 的 <a> 标签。当用户点击它时，它会在内部调用 router.push()，从而改变 URL 而不重新加载页面。

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
  </nav>
</template>

2. `router-view`

router-view 是一个函数式组件，它会渲染路径匹配到的视图组件。你可以把它放在任何地方，以适应你的布局。

<template>
  <header>
    <!-- 导航链接 -->
  </header>

  <main>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view />
  </main>
</template>

3. 动态路由匹配

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们可能有一个 User 组件，它对于所有 ID 各不相同的用户，都要使用这个组件来渲染。我们可以在 path 中使用动态片段来达到这个效果：

const routes = [
  // 动态字段以冒号开始
  { path: '/users/:id', name: 'user', component: User }
]

现在，像 /users/johnny 和 /users/jolyne 这样的 URL 都会映射到同一个路由。

在组件内部，你可以通过 $route.params 来访问这些动态片段。

User.vue

<template>
  <div>User ID: {{ $route.params.id }}</div>
</template>

<script setup>
import { useRoute } from 'vue-router'

// 在组合式 API 中，推荐使用 useRoute 函数
const route = useRoute()
const userId = route.params.id
</script>

4. 路由懒加载

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。Vue Router 支持这种“懒加载”机制。

const routes = [
  {
    path: '/about',
    name: 'about',
    // 使用动态 import() 语法来实现懒加载
    component: () => import('../views/AboutView.vue')
  }
]

这样，AboutView.vue 组件会被打包成一个独立的 chunk，只有在用户访问 /about 路径时才会被加载。

#Vue 路由

#安装

#核心概念

#1. router-link

#2. router-view

#3. 动态路由匹配