路由模式解析

  这里要讲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. ofo开锁共享平台

    http://www.cnblogs.com/mengyu/p/7700980.html

  2. js实现水平伸缩菜单

    window.onload=function(){ var aA=document.getElementsByTagName('a'); for(var i=0; i<aA.length; i+ ...

  3. 3.3.5 高效读取:不变模式下的CopyOnWriteArrayList

    源码分析:读写(get,add) 一:get 方法 private E get(Object[] a, int index) { return (E) a[index];}可以看到读取数据的时候 没有 ...

  4. [GO]结构体的比较和赋值

    package main import "fmt" func main() { type student struct { id int name string sex byte ...

  5. java Concurrent包学习笔记(二):CountDownLatch和CyclicBarrier

    一.CountDownLatch CountDownLatch一个线程同步的工具,是的一个或者多个线程等待其他线程操作完成之后再执行. CountDownLatch通过一个给定的数值count来进行初 ...

  6. SpringMVC错误集中营

    1.eclipse里的错误提示为The import javax.servlet.http.HttpServletRequest cannot be resolved 1.这是因为工程里面web-in ...

  7. 响应者链条,iOS中touchs事件的处理流程。

    用户在使用app的时候,会产生各样的事件.在iOS中的事件可以分为三种 触摸事件(Touch Event) 加速计事件(Accelerometer Event) 远程控制事件(Remote Contr ...

  8. 【Linux】Vim编辑器

    本文基于Debian 1.vim使用简介 1.1vim安装 使用apt安装vim即可: sudo apt-get install vim 1.2 vim编辑器的模式 vim编辑器分为命令模式和编辑模式 ...

  9. HBASE学习d端口master:16010(java操作hbase)https://www.cnblogs.com/junrong624/p/7323483.html

    HBase提示已创建表,但是list查询时,却显示表不存在. https://blog.csdn.net/liu16659/article/details/80216085 下载网址 http://a ...

  10. linux安装memcache及memcache扩展

    一.安装libevent# wget http://www.monkey.org/~provos/libevent-2.0.12-stable.tar.gz# tar zxf libevent-2.0 ...