《Vue Router实战教程》1.设置

欢迎观看《Vue Router 实战（第4版）》视频课程

1. 设置
   1. 介绍

Vue Router 是 Vue.js 的官方路由。为 Vue.js 提供富有表现力、可配置的、方便的路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

1. 嵌套路由映射
2. 动态路由选择
3. 模块化、基于组件的路由配置
4. 路由参数、查询、通配符
5. 展示由 Vue.js 的过渡系统提供的过渡效果
6. 细致的导航控制
7. 自动激活 CSS 类的链接
8. HTML5 history 模式或 hash 模式
9. 可定制的滚动行为
10. URL 的正确编码
    1. 安装
       1. 包管理器

对于一个现有的使用 JavaScript 包管理器的项目，你可以从 npm registry 中安装 Vue Router：

npm

npm install vue-router@4

yarn

yarn add vue-router@4

pnpm

pnpm add vue-router@4

如果你打算启动一个新项目，你可能会发现使用 create-vue 这个脚手架工具更容易，它能创建一个基于 Vite 的项目，并包含加入 Vue Router 的选项：

npm

npm create vue@latest

yarn

yarn create vue

pnpm

pnpm create vue

你需要回答一些关于你想创建的项目类型的问题。如果您选择安装 Vue Router，示例应用还将演示 Vue Router 的一些核心特性。

使用包管理器的项目通常会使用 ES 模块来访问 Vue Router，例如 import { createRouter } from 'vue-router'。

1. 1. 1. 直接下载 / CDN

https://unpkg.com/vue-router@4

Unpkg.com 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。 你也可以通过像 https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js 这样的 URL 来使用特定的版本或 Tag。

这将把 Vue Router 暴露在一个全局的 VueRouter 对象上，例如 VueRouter.createRouter(...)。