通过脚手架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. Dubbo入门到精通学习笔记(十一):Dubbo服务启动依赖检查、Dubbo负载均衡策略、Dubbo线程模型(结合Linux线程数限制配置的实战分享)

    文章目录 Dubbo服务启动依赖检查 Dubbo负载均衡策略 Dubbo线程模型(结合Linux线程数限制配置的实战分享) 实战经验分享( ** 属用性能调优**): Dubbo服务启动依赖检查 Du ...

  2. 23. Jmeter使用ServerAgent对服务器进行性能监控

    我们在做服务器性能测试的时候,往往会考虑四个点:CPU.网络.磁盘.内存.一般情况下是使用Linux命令进行监控,那么jmeter可否做到呢?答案是可以的,闲话不多说,进入正题. 环境准备 jmete ...

  3. 18、Page Object 设计模式

    Page Object 设计模式的优点如下: 减少代码的重复. 提高测试用例的可读性. 提高测试用例的可维护性, 特别是针对 UI 频繁变化的项目. 当你针对网页编写测试时,你需要引用该网页中的元素, ...

  4. No parameter name specified for argument of type

    在使用SpringMVC绑定基本类型(如String,Integer等)参数时,应通过@RequestParam注解指定具体的参数名称,否则,当源代码在非debug模式下编译后,运行时会引发Handl ...

  5. 32-Ubuntu-用户权限-03-修改文件权限

    chmod 简介 chmod可以修改用户或组对文件或目录的权限. 命令格式如下: chmod +/-rwx 文件名/目录名 修改文件权限 例:demo.txt 1.增加权限 例:增加demo.txt的 ...

  6. js中的数据类型隐式转换的三种情况

    js的数据类型隐式转换主要分为三种情况: 1. 转换为boolean类型 2. 转换为number类型 3. 转换为string类型 转换为boolean类型 数据在 逻辑判断 和 逻辑运算 之中会隐 ...

  7. JavaScript小实例-文本循环变色效果

    在现实生活中我们常常看到文字循环变色的效果,此效果不仅能让人们印象深刻,还提高了美观度,代码及注释如下: <!DOCTYPE html> <html> <head> ...

  8. Spring与Struts2 的整合使用

    Spring与Struts2 的整合使用 项目结构 再Struts2 中(还没有与Spring整合时),它创建Action类的依据 <action name="second" ...

  9. 错误 175: 具有固定名称“MySql.Data.MySqlClient”的 ADO.NET 提供程序未在计算

    问题描述:错误 175: 具有固定名称“MySql.Data.MySqlClient”的 ADO.NET 提供程序未在计算 原因描述:一.首先我的系统是因为是win10 的有问题,重新装了系统. 二. ...

  10. GarsiaWachs算法

    解决石子问题: 题目描述如下: 有n堆石子排成一列,每堆石子有一个重量w[i], 每次合并可以合并相邻的两堆石子,一次合并的代价为两堆石子的重量和w[i]+w[i+1].问安排怎样的合并顺序,能够使得 ...