时间戳

首页 > 解决方案 > 使用 vue 时如何为多页应用程序设置路径？

vue.js - 使用 vue 时如何为多页应用程序设置路径？

问题描述

我想构建一个 Web 应用程序，使用Vue它应该具有这样的网站结构：

index-page
  |--page1
  |--page2
  |--page3
  ...

也就是说，我有 1 个索引页，这将是我的主页，其中包含所有其他页面的链接。

但是，每个页面都来自某个类别和一个子类别，所以我希望每个页面的地址应该是这样的：

localhost:8080/category/sub-category/page
example: localhost:8080/algorithms/sorting/bubble

在我的项目结构中，这些类别和子类别是这样放置的：

my-project/src/category/sub-category/page/files

my-project
  |--src
     |--App.vue    // for index page
     |--main.js    // for index page
     |--algorithms
     |  |--sorting
     |  |  |--bubble
     |  |  |  |--bubble.html
     |  |  |  |--App.vue
     |  |  |  |--main.js
     |  |  |  
     |  |  |--selection
     |  |  |  |--selection.html
     |  |  |  |--App.vue
     |  |  |  |--main.js
     |  |  ...
     |  ...
     ...

这些类别和子类别被放置在索引页面上，如下所示：

<h2>category</h2>
  <h3>sub-category</h3>
  <ul>
    <li><a href="#">page</a></li>
    ...
  </ul>
  ...
...

我想要表格的任何地址

localhost:8080/category
or
localhost:8080/category/sub-category

应该导致索引页和地址的形式

localhost:8080/category/sub-category/page

应该加载相应的页面。

那么，我应该如何配置我的vue.config.js文件呢？对于我的项目结构中给出的所有页面，我可以只做一次吗？我只希望我的网站正常运行并以正确的方式开发（不使用任何黑客）。每个页面都是相互独立的。但是每个页面本身都应该是一个 SPA。

另外，我想知道这些所有事物是如何相互关联的vue.config.js：

我问上面的问题是因为我怀疑用户看到的路径是否与项目中的路径相同？

好吧，因为我没有使用名为 的目录pages，这有什么不同吗？

标签： vue.js

解决方案

好。就我个人而言，我正在使用 laravel 构建一个 Vue 应用程序，而我使用的并且大多数人使用的是 Vue 路由器。

https://router.vuejs.org/

您可以在那里定义链接，它会阻止页面重新加载并支持页面转换。并使用特定的 Vue Router href。希望这能回答你的问题。

推荐阅读