通过脚手架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路由中的#的更多相关文章

  1. vue路由中 Navigating to current location ("/router") is not allowed

    报错原因:多次点击同一路由,导致路由被多次添加 解决方法: router/index中添加以下代码: //router/index.js Vue.use(VueRouter) //导入vue路由 co ...

  2. sublime text 3插件改造之AutoFileName去掉.vue文件中img标签后面的width和height,完全去掉!!

    在.vue文件中img标签使用autofilename提示引入文件时,会在文件后面插入宽度高度,如下图: 文件后面会自动插入height和width,其实这两玩意儿在大多数时候并没卵用,然后就开始了百 ...

  3. vue路由中的 Meta

    在项目中肯定有这样的需求,那就是在某个页面的时候,顶部展示 现在当前的页面路径,如下图: 这个在vue中其实很好实现. 首先出现这个肯定是相对应不同的页面,也就是说对应不同的路由,我们在定义路由的时候 ...

  4. vue路由中使用keep-alive 以及activated和deactivated 钩子

    本次只是记录下开发中碰到的问题. 最近做一个活动页面,涉及到角色和权限的问题,需要跳转很多页面,于是vue-router走起,顺便keep-alive也用起来了,嗯,跳转的很爽,但是一个详情页面组件, ...

  5. 去掉vue地址栏中分隔#问题

    你需要开启HTML5 History 模式vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载.如果不想要很 ...

  6. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  7. vue 路由传参的三种基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  8. Dynamic Route Matching Vue路由(1)

    Dynamic Route Matching 动态的 路由 匹配 Very often we will need to map routes with the given pattern to the ...

  9. vue 项目中当访问路由不存在的时候默认访问404页面

    前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...

随机推荐

  1. 22. Jmeter NON GUI模式

    一般情况下我们都是在NonGUI模式下运行jmeter.这样做有两个好处 节省系统资源,能够产生更大的负载 可以通过命令行参数对测试场景进行更精细的配置 需求:模拟5个用户同时访问百度首页的情况 步骤 ...

  2. 使用uc进行手机页面调试

    最近使用uc浏览器的时候发现了,一个有趣的现象,就是uc会处理h5web app为全屏,并屏蔽一些手机上的操作,这样就会使web app更加接近本地应用.所以就研究 了一下uc的手机调试. 1.准备工 ...

  3. C# WinfForm 控件之dev报表 XtraReport (二) 固定数据绑定

    已经子解了XtraReport的初步用法 现在再进一步了解 数据绑定 我们还是先不整高深的 先来个写死的 让我们的数据库数据可以通过报表呈现先 1.准备 还在上节基础上 只不过我把form1 中的Do ...

  4. pytest_fixture-----conftest共享数据及不同层次共享

    场景:你与其他测试工程师合作一起开发时,公共的模块要在不同文件中,要 在大家都访问到的地方. 解决:使用conftest.py 这个文件进行数据共享,并且他可以放在不同位置起 着不同的范围共享作用. ...

  5. python--hmac

    检测一下客户端是否合法,不依靠登录认证.这样即使知道服务端ip和端口,客户端也不能随便就连接服务端实现机制是在服务端中设置了密钥,借用了hmac os 两个模块 import socket impor ...

  6. 22-3concat

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. PROJECT | 四则运算UI设计 - 项目总结

    [项目Github地址] https://github.com/oTPo/hw2 [项目规划] PSP表格 事项 预计时间(min) 实际花费时间(min) 需求分析 60 60 开发流程分析 30 ...

  8. ifame问题

    问题描述:在div中添加了点击事件,div中嵌套着一个iframe,父类的div事件全部都会被失效, 解决办法:给iFrame添加css pointer-events : none; 去掉了ifram ...

  9. kubeadm部署一个Kubernetes集群

    kubeadm是官方社区推出的一个用于快速部署kubernetes集群的工具.这个工具能通过两条指令完成一个kubernetes集群的部署: # 创建一个 Master 节点 $ kubeadm in ...

  10. wpf 绑定除数据上下文外的属性

    例如: listview 绑定了一个windows.datacontext.一个集合,那么其中一个item想绑定windows.datacontext.A属性怎么办: 通过查找祖先的方法: