刷新浏览器导致文件路径改变

Question

我用vue-router来控制路由，在正常页面，刷新浏览器不会出错。但是当我在路线中使用帕尔马斯时。我的文件被重定向到下面的这个路由器。

我的route.js是这样的

{
    path: '/user/:id',
    component: (resolve) => require(['./template/user.vue'], resolve),
    meta:{
        title:'Personal',
    }
}

在我刷新浏览器之前，文件link是这样的 http://127.0.0.1:8888/dist/main.css

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

vue-router中有自动路由吗？

Answer 1

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

中的路由器设置

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

如果您使用 mode: 'hash' 那么一切都会正常。您无需更改 <link href /> 中的任何内容。你可以保留 .(dot).

mode: 'history' 选项可以让一个干净的 url http://127.0.0.1:8888/index

mode: 'hash' 选项允许在 url 中有一个 # 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.The参数在#之后不发送到服务器。 /index 将保留在浏览器中

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

我希望你明白 mode : 'hash' 的作用。

mode : 'history' 是如何工作的？

这里有两种情况

案例一

当您刷新浏览器或从浏览器手动触发此 url http://127.0.0.1:8888/user/23452345

服务器收到整个url，在服务器中寻找对应的路由映射。但是根据你实现的代码，路由 /user/23452345 只会被浏览器识别。您没有任何逻辑来处理服务器上的这条路由。因此，当您触发此操作时，浏览器中会出现空白页面。

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

案例二

http://127.0.0.1:8888/user/23452345

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

如果你想拼命使用mode : 'history'，一种方法是使用真实服务器（比如nodejs），然后将服务器配置为return 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 /> 中的任何内容。你可以保留 .(dot).

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

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

我希望这有用。

更新

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

回到您的问题，删除 .（点）解决了您的问题，对吧！！。我会告诉你为什么

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

build.js也是如此。

但是如果你去掉点，那么href的完整url将是http://127.0.0.1:8888/dist/main.css，因为这里没有提到当前目录，所以/dist/main.css被添加到基本 url 路径。 URL path 只是一个目录路径。

刷新浏览器导致文件路径改变

Refresh browser cause files' path changed

vue-router

vuejs2