Vue.js Router 简介

Vue.js Router 是 Vue.js 的官方路由管理器。它使得构建单页面应用（SPA）变得非常简单。

基本概念

路由（Route）：一个路由就是一个映射关系，它定义了从 URL 到组件的映射。
路由器（Router）：路由器用来管理路由，它根据定义好的路由映射关系，将用户请求的路由地址映射到对应的组件。

安装

你可以通过 npm 或 yarn 来安装 Vue Router：

npm install vue-router
# 或者
yarn add vue-router

使用

以下是一个简单的示例：

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

路由导航

在 Vue 应用中，你可以使用 router-link 组件来实现路由导航：

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

路由参数

路由参数可以让你在路由中传递额外的信息。例如：

<router-link :to="`/user/${userId}`">用户详情</router-link>

图片示例

更多关于 Vue Router 的信息，请访问我们的Vue Router 官方文档。

# Vue Router 简介

Vue.js Router 是 Vue.js 的官方路由管理器。它使得构建单页面应用（SPA）变得非常简单。

## 基本概念

- **路由（Route）**：一个路由就是一个映射关系，它定义了从 URL 到组件的映射。
- **路由器（Router）**：路由器用来管理路由，它根据定义好的路由映射关系，将用户请求的路由地址映射到对应的组件。

## 安装

你可以通过 npm 或 yarn 来安装 Vue Router：

```bash
npm install vue-router
# 或者
yarn add vue-router

使用