第1关：Vue3 路由基础

任务描述

本关任务：使用 Vue 路由完成宠物相册单页面路由功能。

相关知识

为了完成本关任务，你需要掌握： 1.Vue Router 介绍； 2.Vue Router 安装； 3.Vue Router 入门。

Vue Router 介绍

服务端路由指的是服务器根据用户访问的 URL 路径返回不同的响应结果。当我们在一个传统的服务端渲染的 web 应用中点击一个链接时，浏览器会从服务端获得全新的 HTML，然后重新加载整个页面。

然而，在单页面应用中，客户端的 JavaScript 可以拦截页面的跳转请求，动态获取新的数据，然后在无需重新加载的情况下更新当前页面。这样通常可以带来更顺滑的用户体验，尤其是在更偏向“应用”的场景下，因为这类场景下用户通常会在很长的一段时间中做出多次交互。

Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：

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

Vue Router 安装

html 中可以引用 https://unpkg.com/vue-router@4 使用 Vue Router。

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

项目中，可以通过 npm 或者 yarn 去下载 vue router 依赖：

1. #npm 下载
2. npm install vue-router@4
4. #yarn 下载
5. yarn add vue-router@4

Vue Router 入门

HTML 实现路由

Vue.js + vue-router 可以很简单的实现单页应用。

<router-link> 是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。 to 属性为目标地址， 即要显示的内容。

以下实例中我们将 vue-router 加进来，然后配置组件和路由映射，再告诉 vue-router 在哪里渲染它们。代码如下所示：

1. <script src="https://unpkg.com/vue@3"></script>
2. <script src="https://unpkg.com/vue-router@4"></script>
4. <div id="app">
5. <h1>Hello App!</h1>
6. <p>
7. <!--使用 router-link 组件进行导航 -->
8. <!--通过传递 `to` 来指定链接 -->
9. <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
10. <router-link to="/">Go to Home</router-link >&nbsp;&nbsp;&nbsp;
11. <router-link to="/about">Go to About</router-link>
12. </p>
13. <!-- 路由出口 -->
14. <!-- 路由匹配到的组件将渲染在这里 -->
15. <router-view></router-view>
16. </div>
18. <script>
19. // 1. 定义路由组件.
20. // 也可以从其他文件导入
21. const Home = { template: '<div>Home</div>' }
22. const About = { template: '<div>About</div>' }
24. // 2. 定义一些路由
25. // 每个路由都需要映射到一个组件。
26. // 我们后面再讨论嵌套路由。
27. const routes = [
28. { path: '/', component: Home },
29. { path: '/about', component: About },
30. ]
32. // 3. 创建路由实例并传递 `routes` 配置
33. // 你可以在这里输入更多的配置，但我们在这里
34. // 暂时保持简单
35. const router = VueRouter.createRouter({
36. // 4. 内部提供了 history 模式的实现。为了简单起见，我们在这里使用 hash 模式。
37. history: VueRouter.createWebHashHistory(),
38. routes, // `routes: routes` 的缩写
39. })
41. // 5. 创建并挂载根实例
42. const app = Vue.createApp({})
43. //确保 _use_ 路由实例使
44. //整个应用支持路由。
45. app.use(router)
47. app.mount('#app')
49. // 现在，应用已经启动了！
50. </script>

效果如下：

单文件组件实现路由

Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板、逻辑与样式封装在单个文件中。

Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template>、<script> 和 <style> 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。

如果你只需要一个简单的页面路由，而不想为此引入一整个路由库，你可以通过动态组件的方式，监听浏览器 hashchange 事件或使用 History API 来更新当前组件。

下面是一个简单的例子： App.vue：

1. <!--App.vue-->
2. <script>
3. import Home from './template/Home.vue'
4. import About from './template/About.vue'
5. import NotFound from './template/NotFound.vue'
7. const routes = {
8. '/home': Home,
9. '/about': About
10. }
12. export default {
13. data() {
14. return {
15. currentPath: window.location.hash
16. }
17. },
18. computed: {
19. currentView() {
20. return routes[this.currentPath.slice(1) || '/'] || NotFound
21. }
22. },
23. mounted() {
24. window.addEventListener('hashchange', () => {
25. this.currentPath = window.location.hash
26. })
27. }
28. }
29. </script>
31. <template>
32. <div id="app">
33. <a href="#/home">Home</a > |
34. <a href="#/about">About</a> |
35. <a href="#/non-existent-path">Broken Link</a>
36. <component :is="currentView" />
38. </div>
39. </template>

其他文件内容 Home.vue：

1. <!--Home.vue-->
2. <template>
3. <h1>Home</h1>
4. </template>

About.vue：

1. <!--About.vue-->
2. <template>
3. <h1>About</h1>
4. </template>

NotFound.vue ：

1. <!--NotFound.vue-->
2. <template>
3. <h1>404</h1>
4. </template>

项目结构如下图：

注：若项目出现 Component name "Home" should always be multi-word vue/multi-word-component-name 等报错字样，可以在项目 vue.config.js文件，在末尾加入这一行代码 lintOnSave: false即可，关闭组件名字的检查。如下代码：

1. //vue.config.js
4. const { defineConfig } = require('@vue/cli-service')
5. module.exports = defineConfig({
6. transpileDependencies: true,
7. // 关闭组件名字的检查
8. lintOnSave: false
9. })

编程要求

根据提示，在右侧编辑器补充代码，使用 HTML 实现路由完成宠物相册单页面路由功能。效果如下：

测试说明

平台会对你编写的代码进行测试：

会模拟点击，测试路由功能是否完成。 预期输出：

1. 宠物相册路由功能完成！

---

开始你的任务吧，祝你成功！

代码文件

<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<div id="app">
  <h1>Hello Pets!</h1>
  <p>
    <router-link to="/Cat">Cat</router-link >&nbsp;&nbsp;&nbsp;
    <router-link to="/Dog">Dog</router-link>&nbsp;&nbsp;&nbsp;
    <router-link to="/Chicken">Chicken</router-link>
  </p>
  <router-view></router-view>
</div>
<script>

const Cat = { template: '<div><img src="https://data.educoder.net/api/attachments/4401044?type=image/png" width="500" height="500"> Cat</div>' }
const Dog = { template: '<div><img src="https://data.educoder.net/api/attachments/4401004?type=image/png" width="500" height="500"> Dog</div>' }
const Chicken = { template: '<div><img src="https://data.educoder.net/api/attachments/4401119?type=image/png" width="500" height="500"> Chicken</div>' }

const routes = [
  { path: '/Cat', component: Cat },
  { path: '/Dog', component: Dog },
  { path: '/Chicken', component: Chicken }
];

const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes
});

const app = Vue.createApp({});
app.use(router);
app.mount('#app');
</script>