路由模式解析

  这里要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置。如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢。这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷新,页面的状态就被维持在浏览器中了。

Vue-router的三种模式

  • Hash:       使用URL的hash值来作为路由。支持所有浏览器。

  • History:     以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

  • Abstract:支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。

vue-router默认使用的是hash模式,这就会出现如下URL:

解决方法

只需要将router文件下的index.js(创建方式不同,也可能是router.js)中的如下代码位置修改为history模式即可。

在使用Vue搭建前端服务器时,路由出现#号的解决办法的更多相关文章

  1. 初学vue 在做项目时遇到的问题与解决办法(使用element组件)(二)

    表格每行里都有按钮 <el-table-column prop="option" label="操作" align="center" ...

  2. 在centos搭建git服务器时,不小心把/home/git目录删除了,我是怎么恢复的

    在centos搭建git服务器时,不小心把/home/git目录删除了,我是怎么恢复的 在删除掉/home/git目录后,每次 git push提交时,都让填写密码,烦 第一步:在本地找到id_rsa ...

  3. 爬虫爬数据时,post数据乱码解决办法

    最近在写一个爬虫,目标网站是:http://zx.bjmemc.com.cn/,可能是为了防止被爬取数据,它给自身数据加了密.用谷歌自带的抓包工具也不能捕获到数据.于是下了Fiddler.     F ...

  4. 返回xml过长时被nginx截断的解决办法

    返回xml过长时被nginx截断的解决办法 问题描述:通过网页获取数据,数据格式为xml.当xml比较短时,可以正常获取数据.但是xml长度过长时不能正常获取数据,通过观察返回数据的源代码,发现xml ...

  5. HTML5服务器推送消息的各种解决办法,html5服务器

    HTML5服务器推送消息的各种解决办法,html5服务器 摘要 在各种BS架构的应用程序中,往往都希望服务端能够主动地向客户端推送各种消息,以达到类似于邮件.消息.待办事项等通知. 往BS架构本身存在 ...

  6. Bootstrap中关闭第二个模态框时出现的问题和解决办法

    Bootstrap中关闭第二个模态框时出现的问题和解决办法 1.关闭第二个模态框时,第一个模态框跟着消失. 解决办法: 第二个模态框的代码不要写在第一个模态框里面,确保两个模态框相对独立; 2.关闭第 ...

  7. oracle执行update语句时卡住问题分析及解决办法

    转载:http://www.jb51.net/article/125754.htm 这篇文章主要介绍了oracle执行update语句时卡住问题分析及解决办法,涉及记录锁等相关知识,具有一定参考价值, ...

  8. IDEA使用maven构建时控制台中文乱码的解决办法

    使用maven clean install 项目时控制台中文乱码,解决办法如下: Setting->maven->runner VMoptions: -Dfile.encoding=UTF ...

  9. mongodb 更新数据时int32变为double的解决办法 & 教程

    https://www.runoob.com/mongodb/mongodb-mongodump-mongorestore.html mongodb 更新数据时int32变为double的解决办法   ...

随机推荐

  1. Spring.net 在aps.net Web的配置复习

    1.引入程序集Spring.Core,CommonLogging,Spring.Web 2.Web.Config的配置 <?xml version="1.0" encodin ...

  2. VC6.0 中 添加/取消 块注释的Macro代码

    SAMPLE.DSM是微软提供的样例,使用的是vb语言.其中的 CommentOut 函数,是支持块注释的,可是这种/**/的注释方式,有时候用起来不是很方便,因为两个/会因为一个/而终止.对于大块代 ...

  3. python 文件操作(二)

    一. 文件的读写 1.找到文件 文件路径:./test.py 2.打开文件 open('文件路径','模式') 模式: r,   以只读的方式打开 w,  打开一个文件只用于写入,如文件已存在,直接重 ...

  4. JS实现windows.open打开窗口并居中

    function openWin() {            var url='Add.aspx';                             //转向网页的地址;           ...

  5. 为啥final类型的map或者arraylist可以修改数据 而final类型的String变量不可以修改数据呢

    比如 final   Map  map =new  HashMap();    可以往map里put数据final   List  list =new  ArrayList();   可以往list里 ...

  6. Hadoop权威指南文摘

    第1章 初识Hadoop 1.1 数据!数据! 1.2 数据的存储与分析 HDFS实现数据的存储,MapReduce实现数据额分析与处理 1.3 相较于其他系统的优势 MapReduce是一个批量查询 ...

  7. Awk使用方法简介

    ==================AWK=================== AWK简介:awk是一个强大的文本分析工具,相对于grep的查找,sed的编辑,awk在其对数据分析并生成报告时,显得 ...

  8. 修改mysql时区的三种方法

    方法一:通过mysql命令行模式下动态修改 1.1 查看mysql当前时间,当前时区 > select curtime(); #或select now()也可以 +-----------+ | ...

  9. 无线显示技术:WiDi,WLAN Display,Air Play,Miracast的摘抄

    除了标题提到的WIDI,WLAN Display,Air Play之外,还有Miracast与DLNA的概念,他们之间的区别和联系是什么呢? WIDI: WiDi是英特尔主导的无线音视频传输技术,这也 ...

  10. tensorflow使用

    近期在工作中使用tensorflow训练神经网络模型,使用方法简要记录. 环境配置