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

【问题标题】：Refresh browser cause files' path changed刷新浏览器导致文件路径改变
【发布时间】：2018-04-10 03:14:41
【问题描述】：

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

我的 route.js 是这样的

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

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

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

vue-router 有自动路由吗？

【问题讨论】：

你能展示一下项目中链接css文件的代码吗？
是的，我使用 webpack 构建页面，在我的 index.html 页面中，我使用<link rel="stylesheet" href="./dist/main.css"> 链接样式。我的目录结构像this
你能发布你的 webpack 配置文件吗？
另外，删除中的 .(dot) ，只保留 href="/dist/main.css" 没有 .(dot) 并验证
谢谢，我试着移动了。（点）它可以工作。但是为什么它会在我刷新浏览器后影响

标签： vuejs2 vue-router

【解决方案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.#后面的参数不发送到服务器。 /index 将保留在浏览器中

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

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

mode : 'history' 的工作原理是什么？

这里有两种情况

案例 1

当你刷新浏览器或者从浏览器手动触发这个url时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 /> 中的任何内容。您可以保留 .(dot)。

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

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

我希望这是有用的。

更新

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

归结为您的问题，删除 .(dot) 解决了您的问题，对！！。我会告诉你为什么

.(dot) 指当前目录。如果您的网址是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 的完整url 将是http://127.0.0.1:8888/dist/main.css，因为这里没有提到当前目录，所以/dist/main.css 被添加到基本url 路径中。 URL 路径只是一个目录路径。

【讨论】：