代码之家 › 专栏 › 技术社区 › ChadQi

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

vue-router vuejs2

ChadQi · 技术社区 · 6 年前

我的路线。像这样的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路由器中是否有自动路由?

1 回复 | 直到 6 年前

divine 6 年前

您现在面临的问题是由于中的路由器设置 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

模式:“哈希” 选项允许具有 # 在url中 http://127.0.0.1:8888/#/index

怎样 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 ,路线 /索引 将调用。由于此路由在中配置 routeconfig ,将调用相应的组件,您将在浏览器中看到该特定组件。

我希望你明白什么 模式:“哈希” 做

怎样 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 . 这就是为什么在此场景中,在路线更改期间您不会遇到任何问题。

如果你想拼命使用 模式:“历史记录” 一种方法是使用真正的服务器(例如nodejs),然后将服务器配置为返回 http://127.0.0.1:8888 然后在 vuejs routeconfig . 当然,这是不推荐的。

我希望你能理解 模式:“哈希” 和 mode 'history' . 如果您想了解更多详细信息,可以查看vuejs官方文档 https://router.vuejs.org/en/api/options.html#routes

我在重复我刚开始说的话, 修复您的代码

如果您使用 模式:“哈希” <链接href/> . 您可以保留。(dot)。

我建议您看看nuxtjs,以避免所有这些复杂情况。

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

我希望这是有用的。

使现代化

(我没有解释为什么要删除的另一个问题。(dot)修复了问题,下面是解释)

回到你的问题上来

.(dot)指当前目录。如果您的url为 http://127.0.0.1:8888/user/23452345 ,然后是的完整url 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路径。URL路径只是一个目录路径。