路由模式解析

  这里要讲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. 实践作业3:白盒测试----junit的难点DAY11.

    本次白盒测试 需要独立完成整个项目和工具的配置安装运行操作,并编写.运行测试脚本,并完成实验的一些小细节等等. 首先,导入Junit测试框架所需的Jar包 然后编写测试脚本,为.java运行程序,见打 ...

  2. 白盒测试实践--Day0

    白盒测试实践--Day0 累计完成任务情况: 阶段内容 参与人 开会学习作业要求,取得共识 全体 注: 1."阶段内容"划斜线表示完成. 2.采用倒序. 具体情况: 组长提前组织分 ...

  3. 编写高质量代码改善C#程序的157个建议——建议94:区别对待override和new

    建议94:区别对待override和new override和new使类型体系应为继承而呈现出多态性.多态要求子类具有与基类同名的方法,override和new的作用就是: 如果子类中的方法前面带有n ...

  4. C#调用windows命令行(CMD)

    using System.Diagnostics; public static void StartCmd(String command){Process p = new Process();p.St ...

  5. 安装并使用PICT,生成测试用例

    一.PICT简介 PICT工具是在微软公司内部使用的一款承兑组合的命令行生成工具,现在已经对外提供,可以在 http://download.microsoft.com/download/f/5/5/f ...

  6. Linux 判断进程是否已经运行的程序

    bool ServerProcess::isAlreadyRunning() { #ifndef __linux__ WarningLog(<<"can't check if p ...

  7. Eclipse的Debug调试技巧大全

    转载 原文链接:https://blog.csdn.net/u011781521/article/details/55000066 收藏方便以后查看. 19:18:10 2018-12-29

  8. Python之迭代器,生成器与装饰器

    1>迭代器原理及使用: 1>原理: 迭代器是访问集合元素的一种方式,迭代器对象从集合的第一个元素开始访问,直到所有的元素被访问完结束:迭代器只能往前不会后退,不过这也没什         ...

  9. ASP.NET Core入门(一)

    大家好,很荣幸您点了开此篇文章,和我一起来学习ASP.NET Core,此篇文字为<ASP.NET Core入门>系列中的第一篇,本系列将以一个博客系统为例,从第一行代码,到系统发布上线( ...

  10. Linux下卸载删除.Net Core

    最近在技术博客和技术交流群遇到很多小伙伴们在Linux下更新或者安装.Net Core SDK后dotnet命令无法识别等问题,现如下解决: 卸载SDK命令 sudo yum remove dotne ...