去掉vue地址栏中分隔#问题
你需要开启HTML5 History 模式
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
const router = new VueRouter({
mode: 'history',
routes: [...]
}) 这种配置需要配合后端服务器的配置,如果你对服务器是nginx
location / {
try_files $uri $uri/ /index.html;
}
你们的支持,是我坚持的动力~
去掉vue地址栏中分隔#问题的更多相关文章
- vue中去掉url地址栏中的#符号
要去掉vue中访问地址中的#符号可以在路由器中设置路由模式为history: export default new Router({ mode:'history', routes: [ { path: ...
- sublime text 3插件改造之AutoFileName去掉.vue文件中img标签后面的width和height,完全去掉!!
在.vue文件中img标签使用autofilename提示引入文件时,会在文件后面插入宽度高度,如下图: 文件后面会自动插入height和width,其实这两玩意儿在大多数时候并没卵用,然后就开始了百 ...
- 如何去掉vue路由中的#
通过脚手架vue-cli构建的项目,在项目启动后,URL地址上都会带有#,如:http://localhost:8080/#/father 原因:这是因为vue-router 默认hash模式, 使用 ...
- 去掉vue 中的代码规范检测(Eslint验证)
去掉vue 中的代码规范检测(Eslint验证): 1.在搭建vue脚手架时提示是否启用eslint检测的. Use ESLint to lint your code? 写 no; 2.如果项目已经生 ...
- 【面试题】如何去掉vue的url地址中的#号?及其原理?
如何去掉vue的url地址中的#号?及其原理? 点击打开视频讲解更加详细 如何去掉vue的url地址中的#号? import Vue from 'vue'; import VueRouter from ...
- vue组件中使用iframe元素
需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <d ...
- 前端vue开发中的跨域问题解决,以及nginx上线部署。(vue devServer与nginx)
前言 最近做的一个项目中使用了vue+springboot的前后端分离模式 在前端开发的的时候,使用vue cli3的devServer来解决跨域问题 上线部署则是用的nginx反向代理至后台服务所开 ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- vue项目中的常见问题
总结了几个vue项目开发过程中遇到的常见问题,希望大家注意. 注:文末有福利! 一.样式问题 1.vue中使用less 安装less依赖 npm install less less-loader -- ...
随机推荐
- 全站 HTTPS 没你想象的那么简单
对自己无知这件事本身的无知真的挺可怕 认知偏差现象一直存在于我们每个人身上,谁也避免不掉,不过是有的人了解这件事儿,有的人不怎么知道而已,这就产生了「无知而不自知」的认知偏差.当然,这时候你自己忽悠自 ...
- 分享 android 源码
Android精选源码 UI框架 QSkinLoader换肤框架 一款优雅的中国风Android笔记源码 ListView.RecyclerView两种方式实现聊天界面 android仿滴滴时间选择控 ...
- JS 无法清除Cookie的解决方法
JS 无法清除Cookie的解决方法 项目中使用sdmenu.js时,需要在登录时清除Cookie,而sdmenu默认是会保存Cookie的 下面是sdmenu.js保存Cookie的方法 doc ...
- zzuli--2134: 维克兹的进制转换(规律)
2134: 维克兹的进制转换 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 287 Solved: 63SubmitStatusWeb Board D ...
- 阿里云直播SDK - .NET
阿里云sdk:https://develop.aliyun.com/sdk/csharp?spm=5176.doc27234.2.4.QiJb9l Github:https://github.com/ ...
- PyCharm中光标变粗的解决方法
pycharm中光标变粗,如下: 原因:光标进入了改写状态. 解决方法:按一下键盘中的Insert键就好了.
- C互质个数
C互质个数 Time Limit:1000MS Memory Limit:65536K Total Submit:55 Accepted:27 Description 贝贝.妞妞和康康都长大了,如今 ...
- 广搜:codevs-3344(初步bfs)
一道典型的迷宫问题 小刚在迷宫内,他需要从A点出发,按顺序经过B,C,D--,到达最后一个点,再回到A点.迷宫内有些障碍,问至少走几步. 输入描述 Input Description 第一行有三个数n ...
- 为什么要学习Java EE
Java EE学习之路 学习了Java SE,还只是完成“万里长征”的第一步. 接下来选择学习Java EE或是Java ME(或者你还想不断深入学习Java SE,只要你喜欢,你可以一直深入下去,就 ...
- angular或者js如何确定选中ul中的哪几个li
刚来新公司接到新的需求做一个知识库页面 红色的是单选 蓝色的是多选 这些都是需要传递到后台的 开始不知道如何解决 下班后在家想到一个很巧妙的办法 不多说上代码 箭头所指就是在li里写 ...