Vue3教程：英雄指南（四）

前言

最近在看Angular的文档，发现Angular官网的英雄指南的教程挺有意思的，能比较好的一步一步教别人搭建一个项目。最近Vue3也比较火，决定用Vue3仿造Angular的英雄指南写一个完整的教程，也算是一个对自己知识的梳理吧，顺便学习一下Vue3的新特性。由于笔者的知识有限，如果文中有任何错误，希望读者在评论区中直接指出来。VUE版本 3.0.2 Vite版本1.0.0-rc.8

之前的内容请看：
Vue3 教程：英雄指南（一）
Vue3 教程：英雄指南（二）
Vue3 教程：英雄指南（三）

路由

有一些《英雄指南》的新需求：

• 添加一个仪表盘视图。
• 添加在英雄列表和仪表盘视图之间导航的能力。
• 无论在哪个视图中点击一个英雄，都会导航到该英雄的详情页。
• 在邮件中点击一个深链接，会直接打开一个特定英雄的详情视图。

Vue Router

‎Vue Router是‎‎Vue‎‎.js的官方路由器。它与 Vue.js内核深度集成，使构建具有 Vue 功能的单页应用更加轻松。‎

安装

Vue Router的安装方式可以是npm安装，直接下载，或者源码安装。本文中就直接使用npm 。在项目目录下打开命令行，输入指令：

npm install vue-router@next

使用Vue Router

在src目录下新建一个文件夹，重命名为router.js，把它修改为如下代码：

// src\router.js
import Heroes from "./components/Heroes.vue"
import {
    createRouter, createWebHashHistory } from 'vue-router'

const routes = [
  {
    path: '/heroes', component: Heroes }
]
// Create the router instance and pass the `routes` option
// You can pass in additional options here, but let's
// keep it simple for now.
const router = createRouter({
   
  // Provide the history implementation to use. We are using the hash history for simplicity here.
  history: createWebHashHistory(),
  routes, // short for `routes: routes`
})

export default router

再打开main.js，把他替换成如下代码：

// src\main.js
import {
    createApp } from 'vue'
import App from './App.vue'
import './index.css'
import router from './router.js'

const app = createApp(App)
// Make sure to _use_ the router instance to make the
// whole app router-aware.
app.use(router)
app.mount('#app')

首先，router.js 中定义了一些路由规则routes，它将告诉路由器要去什么地方。之后指定选项并创建路由器，导出。在main.js中引入router.js导出的路由器，让根实例use刚刚导出的路由器，以便整个应用都能使用路由功能。

路由

routes 告诉路由器，当用户单击链接或将 URL 粘贴进浏览器地址栏时要显示哪个视图。

由于 router.js 已经导入了 Heroes组件，因此你可以直接在 routes 数组中使用它：

// src\router.js
const routes = [
  {
    path: '/heroes', component: Heroes }
]

典型的 Vue Route 具有两个属性：

• path: 用来匹配浏览器地址栏中 URL 的字符串。
• component: 导航到该路由时，路由器应该创建的组件。

添加路由出口 router-view

打开 App.vue ，修改其模板，把 <Heroes> 元素替换为 <router-view> 元素。

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <router-view></router-view>
  <Messages />
</template>

router-view 会显示匹配当前路由的组件。你可以将它放在任何地方以适应你的布局。

你的 CLI 命令应该仍在运行吧。

npm run dev

修改之后，浏览器应该刷新，并显示着应用的标题，但是没有显示英雄列表。
看看浏览器的地址栏。 URL 是以 / 结尾的。 而到 Heroes组件 的路由路径是 /heroes。
在地址栏中把 /heroes 追加到 URL 后面。你应该能看到熟悉的主从结构的英雄显示界面。

添加路由连接 router-link

理想情况下，用户应该能通过点击链接进行导航，而不用被迫把路由的 URL 粘贴到地址栏。

添加一个 <nav> 元素，并在其中放一个链接 <router-link> 元素，当点击它时，就会触发一个到 Heroes组件 的导航。 修改过的 App.vue 模板如下：

<template>
  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <HelloWorld msg="Hello Vue 3.0 + Vite" />
  <nav>
    <router-link to="/heroes">Heroes</router-link>
  </nav>
  <router-view></router-view>
  <Messages />
</template>

使用