前言
最近在看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>
使用