如何去掉vue路由中的#
通过脚手架vue-cli构建的项目,在项目启动后,URL地址上都会带有#,如:http://localhost:8080/#/father
原因:这是因为vue-router
默认hash模式, 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。
因为对于正常的页面来说,更换url一定是会导致页面的更换的, 而只有更换url中的查询字符串和hash值得时候才不会重新加载页面
解决方法:可以使用路由的history模式!!! 这种模式充分利用了history.pushState API来完成URL的跳转而不需要重新加载页面。
在src/router/index.js下修改如下:
const router = new VueRouter({
mode: 'history', // 加入这一句即可
routes: [...]
})
--------------------- 本文来自 chunchun1230 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/chunchun1230/article/details/78553099?utm_source=copy ---------------------
如何去掉vue路由中的#的更多相关文章
- vue路由中 Navigating to current location ("/router") is not allowed
报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 co ...
- sublime text 3插件改造之AutoFileName去掉.vue文件中img标签后面的width和height,完全去掉!!
在.vue文件中img标签使用autofilename提示引入文件时,会在文件后面插入宽度高度,如下图: 文件后面会自动插入height和width,其实这两玩意儿在大多数时候并没卵用,然后就开始了百 ...
- vue路由中的 Meta
在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图: 这个在vue中其实很好实现. 首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候 ...
- vue路由中使用keep-alive 以及activated和deactivated 钩子
本次只是记录下开发中碰到的问题. 最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是vue-router走起,顺便keep-alive也用起来了,嗯,跳转的很爽,但是一个详情页面组件, ...
- 去掉vue地址栏中分隔#问题
你需要开启HTML5 History 模式vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载.如果不想要很 ...
- 3种vue路由传参的基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- vue 路由传参的三种基本模式
路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...
- Dynamic Route Matching Vue路由(1)
Dynamic Route Matching 动态的 路由 匹配 Very often we will need to map routes with the given pattern to the ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
随机推荐
- CSS:CSS 列表
ylbtech-CSS:CSS 列表 1.返回顶部 1. CSS 列表 CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 列表 在HTML ...
- docker 镜像中心搭建
1.由于国外镜像很慢,所以用了网易蜂巢的镜像docker pull hub.c.163.com/library/registry:2.5.2本地的存储空间挂载到容器内部,持久保存镜像中心文件docke ...
- 8-vim-移动命令-03-段落切换和括号切换
1.段落切换 vi使用空行来区分段落 在程序开发时,通常一段功能相关的代码会写在一起--之间没有空行 命令 功能 { 上一段 } 下一段 2.括号切换 在程序世界中,() [] {}使用频率很高,而且 ...
- 第六篇 xpath的用法
使用pycharm debug调试效率会比较慢,因为每次调试都需要向url发送请求,等返回信息,scrapy提供一种方便调试的功能,如下: >>>(third_project) bi ...
- D3.js 区域生成器 (V3版本)
区域生成器(Area Generator) 区域生成器(Area Generator)用于生成一块区域,使用方法与线段生成器类似.线段生成器地址:数据访问器有x().x0().x1().y().y ...
- 安装Storm的基本过程
- ulimit - 获取和改变用户的限制设定
大纲 #include <ulimit.h> long ulimit(int cmd, long newlimit); 描述 警告: 这个函数已经被废弃. glibc 不再提供这个包含文件 ...
- 【学术篇】CF935E Fafa and Ancient Mathematics 树形dp
前言 这是一道cf的比赛题.. 比赛的时候C题因为自己加了一个很显然不对的特判WA了7次但找不出原因就弃疗了... 然后就想划水, 但是只做了AB又不太好... 估计rating会掉惨 (然而事实证明 ...
- 笔记44 Hibernate快速入门(一)
一.Hibernate简介 Hibernate 是传统 Java 对象和数据库服务器之间的桥梁,用来处理基于 O/R 映射机制和模式的那些对象. Hibernate 架构是分层的,作为数据访问层,你不 ...
- 笔记30 视图解析 ——TilesViewResolver
Apache Tiles,定义适用于所有页面 的通用页面布局.Spring MVC以视图解析器的形式为Apache Tiles提 供了支持,这个视图解析器能够将逻辑视图名解析为Tile定义. 1.配 ...