向 Vue.js cli 3.0 应用程序添加路由

Posted 2023-02-22

【中文标题】向 Vue.js cli 3.0 应用程序添加路由

【英文标题】：Adding Routing to a Vue.js cli 3.0 app

【发布时间】：2018-10-11 01:55:45

【问题描述】：

新的 Vue.js 3.0 插件架构不错，但似乎缺少一个路由器插件。如果我在第一次创建项目时选择不安装路由 (vue create my-project)，我希望我以后可以改变主意并添加类似 vue add @vue/router 的路由，但该插件似乎不存在。事后有没有办法从 CLI 添加路由？

【问题讨论】：

vuejs 3 还是 vue-cli 3？如果您不是在谈论 vuejs 3，您可以按照本指南在项目创建后添加 plugin=router。 Vue Router installation Guide for NPM

是的，vue-cli 3。我已经手动添加了路由，但我很惊讶没有一个插件可以用来为我做这个设置，因为似乎有一个内置在初始 cli 安装中。

@Sphinx 我相信 Vue 3 还不存在。而vue-cli3是完全不同的东西，路由器大概是打包成vue-cli-service

【参考方案1】：

在对 vue-cli3 进行了一些实验后，我发现你可以使用vue add 来设置你错过的组件。

使用vue add router 设置路由并创建一些示例组件 Home 和 About。

这也适用于其他模块，例如使用 vue add vuetify 添加 vuetify。您可以从plugins and presets guide 阅读更多关于 vue add 的信息

【讨论】：

感谢您节省了我的时间 :-)

警告！我只是这样做了，它覆盖了我的 App.vue 文件。也许在使用 vue add router 之前重命名您的 App.vue 文件。

最安全的方法是在运行任何 vue 任务之前先提交所有更改。

【参考方案2】：

在这里查看问题页面：https://github.com/vuejs/vue-cli/issues/1202，结论是如果您最初没有选择路由器，则无法使用cli添加路由器。 三个原因：

已经修改入口文件的后添加路由器非常脆弱。 如果您没有对文件进行太多修改，则可以直接重新生成项目。 如果我们只添加依赖并跳过文件修改部分，那么只需 npm install vue-router 或 yarn add vue-router 会更容易。

【讨论】：

实际上，您可以使用vue-cli 来后期添加vue-router（截至vue-cli 3.0.0）和vue add router。尽管您提到了评论，但还是添加了该功能。

但它不会更新您更改或删除的文件。因此，如果您已经工作了一段时间，那就没那么有用了。