Vue3中的Vue Router初探

栏目: IT技术 · 发布时间: 4年前

内容简介:对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。Vue3中的许多更改都会稍微改变我们访问插件和库的方式,其中包括Vue Router。我们将结合使用

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>

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

Vue3中的Vue Router初探

但是,如果我们尝试直接进入我们的 /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,这是一个很好的模板代码。

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

Vue3中的Vue Router初探

继续阅读其他高赞文章


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Google總部大揭密

Google總部大揭密

史蒂芬.李維 / 陳重亨 / 財信 / 2011-11

∣如果有一天,Google的搜尋引擎突然故障 ∣GMAIL信件全數消失 ∣Google Maps、Google Docs、Google行事曆等所有雲端服務全面停擺 ∣我們該怎麼辦?! 歷史上像Google如此成功,且廣受推崇的企業可沒幾家。它改變了網路的使用方式,也成了我們生活不可或缺的一部分。這到底是怎麼辦到的? 《連線》雜誌資深主筆史蒂芬.李維史無前例同時取得LS......一起来看看 《Google總部大揭密》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

随机密码生成器
随机密码生成器

多种字符组合密码

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试