Vue实现hash模式网址方式(就是那种带#的网址、井号url)
更新时间：2022年07月27日 08:48:17 作者：你挚爱的强哥
这篇文章主要介绍了Vue实现hash模式网址方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
Vue实现hash模式网址
src\js\main.js
...
const router = new VueRouter({
...
mode: 'hash', //hash模式网址，带#井号
// mode: 'history', // 这里存在一个弊端，如果要去掉路由的#号，需要后端配合配置，否则刷新页面就会报错404，反正如果不是非得要做支付建议不用这个参数配置，参考文档：https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90
...
});
...hash模式下网址形如
- http://127.0.0.1/#/home
- http://localhost/#/home
Vue路由中hash模式
import Vue from 'vue'
import Router from 'vue-router'
import { router } from './router/index'
Vue.use(Router)
export default new Router({
mode: 'history',
// mode: 'hash',
base: process.env.BASE_URL,
scrollBehavior: () => ({ y: 0 }),
routes: router
})模式一：mode:‘hash’
hash —— 即地址栏 URL 中的 # 符号
模式二：mode:‘history’
一般场景下，hash 和 history 都可以，除非你更在意颜值，# 符号夹杂在 URL 里看起来不美观。
使用 history 模式时，URL 就像正常的 url，不过这种模式还需要后台配置支持。
问题：
开发环境下，路由不管选用hash模式还是history模式都不会出问题，但打包后放在服务器上history模式会出现页面一片空白的情况,而且没有资源加载错误的报错信息.。
原因：
1、后台配置支持是否支持：history，是需要后台配置支持的。原理是要在服务端增加一个覆盖你的路由内所有情况的候选资源，如果 URL 匹配不到任何候选资源，则定位到打包好的 index.html 页面，这个页面就是你 app 依赖的页面。
后端配置链接：https://router.vuejs.org/zh/guide/essentials/history-mode.html
2、前端配置：
router/index.js
export default new Router({
mode: 'history',
// mode: 'hash',
base: '/WebTest/Vue/bigscreen/dist',
routes: router
})mode配置成hostory
如果项目代码直接放在服务器的根目录, 那么是没有问题的,base不需要配置。如果项目代码是放在服务器的子目录,需要加一个base配置项，里面配置项目代码在服务器内的路径。
【我的代码放在/WebTest/Vue/bigscreen】
**vue.config.js**
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家介绍了vue 结合webpack的初级使用指南非常适合入门webpack的小白学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
本篇文章主要介绍了Vue 中批量下载文件并打包的示例代码，用 ajax 将文件下载, 然后用 jszip 压缩文件, 最后用 file-saver 生成文件，有兴趣的可以了解一下2017-11-11
本文主要介绍了Vue3和Electron实现桌面端应用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-07-07
这篇文章主要为大家详细介绍了Vue.js实现价格计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了vue-cli 配置资源引用的绝对路径的问题，本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-09-09
在本篇文章里我们给大家整理的是关于vue指令v-html使用过滤器filters功能的实例内容，需要的朋友们学习下。2019-10-10
这篇文章主要为大家详细介绍了vue使用laydate时间插件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要介绍了vue中实现图片压缩 file文件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要为大家介绍了Vite多环境配置项目高定制化能力详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue-cli脚手架config目录下index.js配置文件的方法
下面小编就为大家分享一篇vue-cli脚手架config目录下index.js配置文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
最新评论