Vue实现hash模式网址方式(就是那种带#的网址、井号url)

目录

Vue实现hash模式网址

Vue路由中hash模式

模式一:mode:‘hash’

模式二:mode:‘history’

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**

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读

    vue项目一些常见问题

    vue项目一些常见问题,组件,样式,**样式污染问题**同样的样式不需要在每个组件都复制组件内单独的样式加外层class包裹。加scope。否则只是

    01-Vue项目实战-网易云音乐-准备工作

    01-Vue项目实战-网易云音乐-准备工作,网易,项目,前言在接下来的一段时间,我会仿照网易云音乐,利用Vue开发一个移动端的网易云音乐项目。在做

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发

    01- 第一天 spring boot2.3.1 +vue3.0 后台管理系统的研发,自己的,后台,后台框架一直想开发一套完全属于自己的后台,但是18年的时候,曾经答

    Vue项目中 App.vue文件

    Vue项目中 App.vue文件,文件,内容, 在App.vue文件中,定义了一个id为app的div,在这个div板块中放置Helloworld组件,文件内容如下图所示:在

    url怎么设置|URL怎么设置手机

    url怎么设置|URL怎么设置手机,,1. URL怎么设置手机很多人都在用IPHONE苹果手机,但是大多不知道iOS系统设置怎么设置HTTP代理服务器,改过之后

    1-Vue构造函数的生成

    1-Vue构造函数的生成,函数,属性,版本:@2.6.10环境:web ;思维图:www.processon.com/view/link/5…我们使用的Vue是一个经过层层加强的构造函数

    url格式是什么?怎么打开url?

    url格式是什么?怎么打开url?,格式,文件,快捷方式,网络地址,失效,域名,url格式是什么?url格式是网址快捷方式。url一般用浏览器打开。URL是(Unifor

    vue的跨域是什么意思

    vue的跨域是什么意思,跨域,浏览器,代理,请求,服务器,同源策略,在vue中,跨域是指浏览器不能执行其他网站的脚本;它是浏览器同源策略造成的,是浏览器

    Vue中如何实现表单验证

    Vue中如何实现表单验证,验证,表单验证,表单,用户名,元素,指令,随着web应用的不断发展,表单验证逐渐成为web开发过程中不可或缺的一部分。在Vue中