Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router。我们将结合使用Alpha版本的Vue Router和当前的Vue3 Alpha版本进行研究。

本文告诉你如何将Vue Router添加到Vue3项目中,并有一个很好的小例子!

设置

首先,我们将使用由Evan You 发布的Vue3 Webpack预览版

让我们使用 git clone https://github.com/vuejs/vue-next-webpack-preview.git 克隆仓库。

然后,要将vue-router alpha添加到我们的项目中,我们要修改 package.json 文件。

在我们的依赖关系中,我们想添加以下版本的vue-router

"dependencies": {
  "vue": "^3.0.0-alpha.10",
  "vue-router": "4.0.0-alpha.4"
}

现在,我们终于可以从命令行运行 npm install 来安装所有依赖项。

我们最终要做的设置是实际创建你的路由文件以及一些映射到它的视图。

src/ 文件夹中,我们将添加三个文件。

  • router/index.js
  • views/Home.vue
  • views/Contact.vue

我们的路由器文件将包含我们的路由器,并且我们的 Home/Contact 视图将只输出一个单词,以便我们了解发生了什么。

建立路由

一切准备就绪,让我们开始使用Vue Router!

简而言之,Vue Router的Vue3版本的主要区别在于我们必须导入新方法才能使代码正常工作。其中最重要的是createRoutercreateWebHistory

在我们的 router/index.js 文件中,让我们导入这两个方法以及前面的两个视图。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'

接下来,我们要做的是使用createWebHistory方法创建一个routerHistory对象。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import Contact from '../views/Contact.vue'

const routerHistory = createWebHistory()

在此之前,我们可以只输入 mode: history 来从哈希模式切换到 history 模式,但是现在我们使用 history: createWebHistory() 来实现这一点。

接下来,我们实际上可以使用 createRouter 创建路由器,它接受一个对象,我们希望传递 routerHistory 变量以及两个路由的数组。

const router = createRouter({
  history: routerHistory,
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/contact',
      component: Contact
    }
  ]
})

最后,让我们将路由导出。

export default router

如你所见,它仍然与Vue2非常相似。但是,通过所有这些更改,可以更好地支持Typescript和进行优化,因此熟悉新方法是很不错的。

使用vue路由器

现在我们的Vue Router文件已经设置好了,我们可以将其添加到项目中了。以前,我们可以导入它并Vue.use(router),但这在Vue3中不一样。

在 main.js 文件中,你会看到我们正在使用Vue中的 createApp 方法来实际创建我们的项目。在默认项目中,它链接 createAppmount 方法。

const app = createApp(App)

app.mount('#app')

然后,在挂载我们的应用程序之前,我们想告诉它使用路由器文件。

import router from './router'

const app = createApp(App)

app.use(router)

app.mount('#app')

最后,在我们的App.vue文件中,让我们实际显示我们的 router-view 并提供一些 router-link,以便我们能够四处导航。

<template>
  <div id='root'>
    <img src='./logo.png' />
    <div id='nav'>
      <router-link to='/'> Home</router-link>
      <router-link to='/contact'>Contact </router-link>
    </div>
    <router-view />
  </div>
</template>

所以现在,如果我们单击一下,我们将看到实际上可以在两个页面之间导航!

但是,如果我们尝试直接进入我们的 /contact 路由,那将不起作用!我们遇到某种错误。

幸运的是,这是可以非常快速的用webpack修复。

在我们的 webpack.config.js 文件中,我们希望通过更改配置使devServer能够使用 history api,使它看起来像这样。

devServer: {
    inline: true,
    hot: true,
    stats: 'minimal',
    contentBase: __dirname,
    overlay: true,
    historyApiFallback: true
}

现在,如果我们直接导航到 /contact 路由,那么一切都应该正常运行

总结

我们已成功将vue-router添加到我们的Vue3项目中。其他大多数功能(例如导航守卫,处理滚动条)和这些功能大致相同。

这是本教程最终Github仓库的链接。如果您想在Vue3测试版中安装vue-router,这是一个很好的模板代码。


文章首发《前端外文精选》微信公众号

1.png

继续阅读其他高赞文章



前端全栈开发者
专栏首发于公众号《前端全栈开发者》,订阅关注第一时间阅读好文

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
0 条评论
推荐阅读
在Flutter中动态地改变应用启动器图标
在本文中,我们将讨论如何在 Flutter 应用程序的运行时动态更改多个应用程序启动器图标。在 pubspec.yaml 文件中添加以下依赖项。flutter_dynamic_icon:[链接]考虑我们已经准备好基本的 UI(包含图像和按钮小部...

杭州程序员张张阅读 720

封面图
从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木143阅读 12k评论 10

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木60阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.2k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木41阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan42阅读 2.8k评论 14

封面图
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan34阅读 2.3k评论 2

封面图

Web/Flutter/独立开发者/铲屎官

11.7k 声望
6.6k 粉丝
宣传栏