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

---

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

继续阅读其他高赞文章

• 你不知道的CSS国际化
• React.js和Vue.js的语法并列比较
• 老板知道会点赞，前端开发人员的10个安全建议
• Web中的图像技术总结，前端开发中各种图片引入的优点缺点及实例
• 在Vue.js编写更好的v-for循环的6种技巧
• 2020年的12个Vue.js开发技巧和窍门
• 【小技巧】CSS如何实现文字两端对齐效果？
• 7个简单但棘手的JavaScript面试问题
• 让你可以在2020年成为前端大师的9个项目
• 【笔记】Web全栈工程师的自我修养（上）
• 【笔记】Web全栈工程师的自我修养（下）
• 【小技巧】H5页面上如何禁止手机虚拟键盘弹出？
• 拒绝JavaScript，这三个CSS技巧你一定用的上​
• 7个能提高你生产力的隐藏Chrome DevTools功能
• 【图文教程】同步你的VSCode设置及扩展插件，换机不用愁

---

• 更多...