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版本的主要区别在于咱们必须导入新方法才能使代码正常工做。其中最重要的是createRouter 和 createWebHistory。

在咱们的 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 方法来实际建立咱们的项目。在默认项目中，它连接 createApp 和 mount 方法。

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，这是一个很好的模板代码。

---

文章首发于公众号 《前端外文精选》，私信回复：大礼包，送某网精品视频课程网盘资料，准能为你节省很多钱！