一、Vue Router 的三件套先记住这张关系图上一章我们手写的简易路由器核心是路径表 监听 动态组件。Vue Router 把这三件事封装成了三个东西路由器实例router由 createRouter() 创建里面装着路由配置表是整个路由的大管家。RouterView路由的出口告诉 Vue Router 当前页面要显示在这里。RouterLink路由的入口用来创建不刷新页面的跳转链接。这一章我们就把这三件套用起来跑通一个真正的 Vue Router 应用。二、安装 Vue Router如果你是用 create-vue 脚手架创建的项目创建时勾选 Router 选项就行复制npm create vuelatest1.按提示操作勾选Add Vue Router for Single Page Application development?脚手架会自动帮你装好并配置好。如果你是手动往已有项目里加就自己安装复制npm install vue-router41.注意版本号是 4。Vue 3 对应的是 Vue Router 4Vue 2 对应的是 Vue Router 3别装错了。三、第一步定义路由配置表新建一个文件 src/router/index.js先把路由配置写出来复制// src/router/index.js import { createRouter, createWebHistory } from vue-router // 引入两个页面组件 import HomeView from ../views/HomeView.vue import AboutView from ../views/AboutView.vue // 路由配置表路径和组件的对应关系 const routes [ { path: /, component: HomeView }, { path: /about, component: AboutView }, ] // 创建路由器实例 const router createRouter({ // 历史模式后面会详细讲先用这个 history: createWebHistory(), routes, }) export default router你发现没有——routes 这张表和我们上一章手写的对照表几乎一样复制// 上一章手写的 const routes { /: Home, /about: About, } // Vue Router 的 const routes [ { path: /, component: HomeView }, { path: /about, component: AboutView }, ]只是从对象变成了数组每条配置是一个对象。变成数组是为了支持更多字段后面会用到 name、children 等也为路径匹配留出了排序空间。四、第二步在 main.js 里注册路由器插件光创建路由器实例还不够得让整个 Vue 应用知道它的存在。这一步通过 app.use(router) 完成复制// src/main.js import { createApp } from vue import App from ./App.vue import router from ./router const app createApp(App) // 把路由器注册为插件必须在 mount 之前 app.use(router) app.mount(#app)app.use(router) 这一步路由器会偷偷做四件事全局注册 RouterView 和 RouterLink 两个组件让你在任何模板里都能直接用不用手动 import。给所有组件注入 $router路由器实例和 $route当前路由对象两个属性。启用 useRouter() 和 useRoute() 两个组合式函数。触发路由器解析初始路由也就是一打开应用就根据当前 URL 显示对应页面。复制app.use router注册 RouterView/RouterLink注入 $router/$route启用 useRouter/useRoute解析初始路由1.五、第三步在 App.vue 里放好出口和链接现在打开根组件 App.vue把路由的入口和出口摆好复制!-- src/App.vue -- template h1Hello App!/h1 p strong当前路径/strong{{ $route.fullPath }} /p !-- 导航链接用 RouterLink 代替 a 标签 -- nav RouterLink to/首页/RouterLink | RouterLink to/about关于/RouterLink /nav !-- 路由出口当前 URL 对应的组件会显示在这里 -- main RouterView / /main /template这里有两个关键点(1) RouterLink 代替 aRouterLink to/about 渲染出来其实也是一个 a 标签但点击它不会刷新页面而是交给路由器去处理跳转。to 属性指定要跳到哪个路径。复制!-- 这两个效果类似但 RouterLink 不刷新页面 -- a href/about关于/a RouterLink to/about关于/RouterLink(2) RouterView 是出口RouterView / 是一个占位符意思是当前 URL 对应的组件请显示在这里。URL 一变这里显示的内容就跟着变。(3) $route 是当前路由对象模板里的 {{ $route.fullPath }} 可以访问当前路由的信息。fullPath 是完整的路径包括查询参数和 hash$route 还有很多其他字段后面会用到。六、第四步准备两个页面组件路由配置里引用了 HomeView 和 AboutView把它们创建出来复制!-- src/views/HomeView.vue -- template div h2首页/h2 p这是用 Vue Router 跑起来的第一个应用。/p /div /template复制!-- src/views/AboutView.vue -- script setup import { computed } from vue import { useRoute } from vue-router const route useRoute() // 演示读取查询参数访问 /about?searchhello 时search 的值是 hello const search computed(() route.query.search ?? 没有搜索词) /script template div h2关于页/h2 p搜索词{{ search }}/p p试试访问 code/about?searchvue/code/p /div /template现在运行项目npm run dev打开浏览器访问 / 显示首页。访问 /about 显示关于页。点击导航链接页面切换但不刷新。地址栏的 URL 会变。到这里你的第一个 Vue Router 应用就跑起来了。七、router 和 route一个字母之差含义完全不同新手最容易搞混这两个词一定要分清1. router路由器实例router 是路由器实例由 createRouter() 返回。它是管理者负责执行跳转动作。在组合式 API 里const router useRouter()在选项式 API 里this.$router它的方法都是动作跳转、替换、前进、后退。复制router.push(/about) // 跳转到 /about router.replace(/login) // 替换当前页不留历史 router.go(-1) // 后退一步2. route当前路由对象route 是当前路由对象描述现在这个 URL 是什么样。它是信息是只读的。在组合式 API 里const route useRoute()在选项式 API 里this.$route它的属性都是信息当前路径、参数、查询字符串、hash 等。复制route.path // /about route.fullPath // /about?searchvue#top route.params // { id: 123 }动态路由参数 route.query // { search: vue }查询参数 route.hash // #top route.name // about命名路由的名字一句话记忆router 是动手的route 是看信息的。八、组合式 API 和选项式 API 怎么访问它们Vue Router 对两种 API 风格都支持。组合式 API推荐配合 script setup复制script setup import { useRoute, useRouter } from vue-router const route useRoute() const router useRouter() function goToAbout() { router.push(/about) } /script template p当前路径{{ route.path }}/p button clickgoToAbout去关于页/button /template选项式 API复制script export default { methods: { goToAbout() { this.$router.push(/about) }, }, } /script template p当前路径{{ $route.path }}/p button clickgoToAbout去关于页/button /template两种风格效果一样本系列后续示例默认用组合式 API因为 script setup 更简洁。九、一个常见的困惑组件名字的大小写你会发现教程里有时写 RouterView有时写 router-view。这俩是等价的复制RouterView / router-view/router-viewVue 的模板编译器同时支持 PascalCase 和 kebab-case。你跟着项目里的约定走就行本系列统一用 PascalCase。但有一个例外如果你用的是DOM 内模板也就是直接写在 HTML 文件里、而不是 .vue 文件里的模板那就必须用 kebab-case 且不能自闭合得写成 router-view/router-view。用 .vue 文件就没有这个限制。十、用 create-vue 脚手架快速起步如果你想直接拿到一个配好 Vue Router 的完整项目用官方脚手架是最快的复制npm create vuelatest按提示操作输入项目名。是否用 TypeScript按需选择。是否启用 JSX按需选择。Add Vue Router for Single Page Application development? → 选 Yes。其他选项按需选择。创建出来的项目结构和我们这一章手动搭的几乎一样已经包含了 router/index.js、App.vue 里的 RouterView 和几个示例页面。你可以直接在这个基础上改。十一、学完这一章你要记住这几句话Vue Router 的三件套createRouter() 创建路由器RouterView 是出口RouterLink 是入口。app.use(router) 注册插件后全局就能用 RouterView 和 RouterLink也能用 useRouter()/useRoute()。router 是路由器实例负责动手跳转route 是当前路由对象负责描述当前 URL。路由配置表是一个数组每条配置至少有 path 和 component 两个字段。RouterLink to... 渲染成 a 标签但点击不刷新页面。十二、常见报错1. 报错一Failed to resolve component: RouterView原因没有调用 app.use(router)或者调用了但顺序不对在 mount() 之后才调用。解决确认 main.js 里 app.use(router) 在 app.mount(#app) 之前。复制// 正确顺序 app.use(router) app.mount(#app)2. 报错二[Vue Router warn]: No match found for location with path ...原因访问的 URL 在路由配置表里找不到对应项。你还没有配置 404 兜底路由。解决暂时不用管下一章讲动态路由匹配时会教你怎么配 404。现在先确认访问的是配置过的路径/ 或 /about。3. 报错三页面空白什么都不显示原因App.vue 里忘了写 RouterView /。路由器知道当前该显示哪个组件但没有出口它无处可显示。解决在 App.vue 模板里加上 RouterView /。十三、练习在你的 Vue Router 应用里完成这两件事再加一个联系我页面路径 /contact。需要新建组件、在路由表里加一条配置、在导航里加一个 RouterLink。在关于页里用 useRoute() 读取当前的 path 并显示出来。然后试着在浏览器地址栏手动改成 /about?searchvue看看页面能不能正确读取到查询参数 search 的值。做完这两个练习你就掌握了 Vue Router 最基本的使用流程配路由、放出口、写链接、读信息。