如何去掉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页面. 一般的处理方法是: 在 ...
随机推荐
- 机器学习基石笔记:Homework #3 LinReg&LogReg相关习题
原文地址:http://www.jianshu.com/p/311141f2047d 问题描述 程序实现 13-15 # coding: utf-8 import numpy as np import ...
- strcmp 和 strcoll的区别
功能和strcmp类似,用法也一样. 特别注意:strcoll()会依环境变量LC_COLLATE所指定的文字排列次序来比较s1和s2 字符串. strcmp是根据ASCII来比较2个串的. ...
- 行动带来力量,周三(5月7日)晚IT讲座通知
讲座简单介绍 ITAEM团队负责人骆宏等和大家周三晚8点(5月7日)相约钟海楼03035.和大家分享团队成员的"编程入门之路",在这里,同龄人(大三)以学生的角度.和大家分 ...
- 一.Python特点
python第一节 简介 Python介绍 什么样的语言? 解释性语言:开发中没有编译的环节 交互式语言:在命令提示行执行python引擎,直接执行代码 面向对象语言:支持面向对象 优点 a.易学 b ...
- 文件 IO
io分类 在文件IO 中是通过文件描述符操作文件的,实际上是一个非负整数 头文件 #include <sys/types.h> #include <sys/stat.h> ...
- java 面试2019
[第一部分] 面试要领[第1题] 流程必知必会[第2题] JDK源码[第二部分] 类和对象[第二篇] 面向对象基础[第1题] 面向对象是什么?[第2题] 类加载的过程[第3题] 类加载器有哪些[第4题 ...
- http/tcp/ip/端口
http是www服务器和本地浏览器之间传输超文本的协议. 每一台机器都有一个属于自己的ip地址,计算机也需要知道是哪个程序来接受信息,这里也就引入了端口号,可以简单地理解每一个程序都有一个唯一的端口号 ...
- selenium 操作键盘事件
一.key包提供按键方法 使用必须先引用key包:from selenium.webdriver.common.keys import Keys 键盘事件,在现实操作中我们习惯性的按tab见切换到写一 ...
- MapReduce分区数据倾斜
什么是数据倾斜? 数据不可避免的出现离群值,并导致数据倾斜,数据倾斜会显著的拖慢MR的执行速度 常见数据倾斜有以下几类 1.数据频率倾斜 某一个区域的数据量要远远大于其他区域 2.数据大小倾斜 ...
- Go 程序开发的注意事项
Go 程序开发的注意事项 1) Go 源文件以 "go" 为扩展名. 2) Go 应用程序的执行入口是 main()函数. 这个是和其它编程语言(比如 java/c) ...