路由模式解析

  这里要讲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. Excel中使用VBA访问Access数据库

    VBA访问Access数据库 1. 通用自动化语言VBA VBA(Visual Basic For Application)是一种通用自动化语言,它可以使Excel中的常用操作自动化,还可以创建自定义 ...

  2. logback与log4j比较

    摘自:https://www.cnblogs.com/smile361/p/7592684.html logback与log4j比较 更快的执行速度: 基于我们先前在log4j上的工作,logback ...

  3. [欣赏代码片段] (JavaScript) 你使用过getComputedStyle没有

    (function() { // IE8 ployfill for GetComputed Style (for Responsive Script below) if (!window.getCom ...

  4. centos7用fdisk进行分区

    1.查看分区信息:fdisk -l 从上面可以看到,/dev/sdb分区还没有使用,现在将其划分成2个10G的分区. 2.执行:fdisk /dev/sdb 1):fdisk命令参数 p:打印分区表. ...

  5. yii2 gridview 新增按钮 动态显示按钮

    新增一个按钮 [ 'class' => 'yii\grid\ActionColumn', 'header' => '操作', 'options' => ['width' => ...

  6. 【转载】Redis优化经验

    转载地址:http://blog.sina.com.cn/s/blog_4be888450100z2ze.html 内存管理优化 Redis Hash是value内部为一个HashMap,如果该Map ...

  7. GithubPage自定义腾讯404界面

    思路来源 之前看到腾讯网络的404和github自带的404,反差很大,于是想自己弄一个了. 过程 github的404一点也不复杂,只是需要在根目录添加一个404.html的文档,或者404.md的 ...

  8. How To Start Building Spatially Aware Apps With Google’s Project Tango

    How To Start Building Spatially Aware Apps With Google’s Project Tango “Tango can enable a whole new ...

  9. spark介绍2

    上述结果是 map 1 filter 1 map 2 filter 2 map 3 filter 3 map 4 filter 4 即说明是并行,且互不干扰,每个task运行到最后

  10. UVA - 12424 Answering Queries on a Tree(十棵线段树的树链剖分)

    You are given a tree with N nodes. The tree nodes are numbered from 1 to N and have colors C1, C2,. ...