Question

我使用vue-router来控制我的路线，在正常页面中，当我刷新浏览器时它没有任何错误。但是当我在路线上使用parmas时。我的文件重定向到下面的路由器。

我的路线。喜欢这个

**Tried following changes in 
> app.module.ts
 and its working fine !!**

import drilldown dependency as : 
**import * as drilldown from 'highcharts/modules/drilldown.src.js'**

use providers in NgModule as : 

  providers: [
{provide: HIGHCHARTS_MODULES,
    useFactory: () => [ drilldown]
}]

在我刷新浏览器之前，文件链接如下 { path: '/user/:id', component: (resolve) => require(['./template/user.vue'], resolve), meta:{ title:'Personal', } }

刷新浏览器后，文件路径转到http://127.0.0.1:8888/dist/main.css

vue-router中是否有自动路由？

Answer 1

您现在面临的问题是src/main.js

中的路由器设置

const router = new VueRouter({
    mode: 'history',
    routes: Routers,
})

如果你使用mode: 'hash'那么一切都会正常工作。您无需在<link href />中更改任何内容。你可以保留。（点）。

mode: 'history'选项可以创建一个干净的网址 http://127.0.0.1:8888/index

mode: 'hash'选项可以在网址中添加# http://127.0.0.1:8888/#/index

mode : 'hash'如何运作？

mode : 'hash'使用默认浏览器行为，这是为了防止http请求触发url中#之后存在的详细信息。这就是单页应用程序的工作方式。

当您触发http://127.0.0.1:8888/#/index 将会发生两件事

1。http://127.0.0.1:8888将被触发，服务器将收到此请求

2. #之后的参数未发送到服务器。 /index将保留在浏览器中

从服务器http://127.0.0.1:8888收到响应后，将调用路由/index。由于此路由在routeconfig中配置，因此将调用相应的组件，您将在浏览器中看到该特定组件。

我希望你理解mode : 'hash'做了什么。

mode : 'history'如何运作？

这里有两种情况

案例1

刷新浏览器或从浏览器http://127.0.0.1:8888/user/23452345

手动触发此网址时

服务器接收整个url并在服务器中查找相应的路由映射。但是根据您实现的代码，路由/user/23452345将仅由浏览器识别。您没有任何逻辑可以在服务器上处理此路由。因此，当您触发此操作时，您将在浏览器中显示空白页面。

这是浏览器正常运行的方式

案例2

http://127.0.0.1:8888/user/23452345

如果从浏览器中呈现的vue代码触发上面的url，则vue将识别该请求并调用routerconfig。这就是为什么在这种情况下你不会在路线改变期间遇到任何问题。

如果你想拼命使用mode : 'history'，一种方法是使用真实的服务器（比如说nodejs），然后配置服务器为所有请求返回http://127.0.0.1:8888然后处理它vuejs routeconfig。当然不建议这样做。

我希望您了解mode: 'hash'和mode 'history'之间的区别。如果您想了解更多详情，可以查看vuejs官方文档https://router.vuejs.org/en/api/options.html#routes

我重复我在开头说的话，来修复你的代码

如果你使用mode: 'hash'那么一切都会正常工作。您无需在<link href />中更改任何内容。你可以保留。（点）。

我建议你看看nuxtjs以避免所有这些并发症。

这只是一条评论您已在git中上传了nodemodules/目录。没有必要上传它。 package.json将使开发人员能够维护项目中使用的包的详细信息。简单的npm install将下载所有包。这将使上传nodemodules/目录变得不必要。此外，我们不希望任何不必要的东西存储在源代码存储库中。

我希望这很有用。

更新

（我没有解释你的另一个问题，为什么要删除。（点）解决了问题，这里是解释）

归结为您的问题，删除。（点）解决了您的问题，对吧!!我会告诉你为什么

。（点）指当前目录。如果您的网址为http://127.0.0.1:8888/user/23452345，那么href="./dist/main.css"的完整网址将为http://127.0.0.1:8888/user/dist/main.css，因为它从当前目录开始

build.js也是如此。

但是如果删除点，那么href的完整网址将为http://127.0.0.1:8888/dist/main.css，因为此处未提及当前目录，因此/dist/main.css会添加到基本网址路径中。 URL路径只是一个目录路径。

刷新浏览器导致文件的路径已更改

1 个答案: