特别提醒:开启mode="history"模式,需要服务端的支持,因为出现“刷新页面报错404”的问题;

大家都知道,路由地址都是以"#"形式展示,但是有些时候,我们又希望路由地址中不出现"#",那怎么办呢?

vue给我们提供了一个属性mode="history";代码如下

const router = new Router({
mode: 'history', // 去掉路由地址的#
routes: [
{
path: '/', // 默认进入路由[写在第一个]
redirect: '/home' //重定向
},
{
path: '/login',
name: 'login',
component: LoginPage
},
{
path: '**', // 错误路由[写在最后一个]
redirect: '/home' //重定向
}
]
});

vue2.0 路由模式mode="history"的作用的更多相关文章

  1. vue2.0路由

    现在用vue-cli搭建的环境里面vue-router是下载好的 vue2.0路由方式和以前也有些不同 没了了map和start方法 目录结构如上图 这里有三个文件,app.vue显示,main.js ...

  2. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  3. vue2.0路由进阶

    一.路由的模式 第一种用history方式实现,HTML5使用window.history.pushState()实现路由的切换而不刷新页面. 第二种使用hash值的方式来实现. vue2.0两种都可 ...

  4. vue2.0路由变化1

    路由的步骤 1.定义组件 var Home={ template:'<h3>我是主页</h3>' }; var News={ template:'<h3>我是新闻& ...

  5. vue2.0路由-路由嵌套

    vue一个重要的方面就是路由,下面是自己写的一个路由的例子: 1.引入依赖库就不必再说 2.创建组件 两种写法 第一种:间接 <template id="home"> ...

  6. vue切换路由模式{hash/history}

    vue中常用的路由模式 hash(#):默认路由模式 histroy(/)切换路由模式 切换路由模式 export default new Router({ // 路由模式:hash(默认),hist ...

  7. vue2.0 路由学习笔记

    昨天温故了一下vue2.0的路由 做个笔记简单记录一下! 1.首相和vue1.0一样 要使用vuejs的路由功能需要先引入vue-router.js 2.然后修改原有a标签处代码 这里以一个ul li ...

  8. vue2.0路由切换后页面滚动位置不变BUG

    最近项目中遇到这样一个问题,vue切换路由,页面到顶端的滚动距离仍会保持不变.  方法一: 监听路由 // app.vue export default { watch:{ '$route':func ...

  9. vue2.0 路由知识一(路由的创建的全过程)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. Hbase 常用命令

    ################################################################# #author: 陈月白 #_blogs: http://www.c ...

  2. speedment 入门教程

    speedment 是基于 Java8 的 orm 框架,相比较 hibernate 和 mybatis 你只要很少的代码就可以实现对数据库的操作,而且根据查询自动帮你优化SQL,开发者无需编写SQL ...

  3. arguments,caller,callee之理解

    arguments对象代表正在执行的函数和调用它的函数的参数,arguments是一个不是数组但类似 数组的对象,它具有同数组一样的访问性质及方式,可以由arguments[n]来访问对应单个参数的值 ...

  4. Dynamic HTML权威指南(读书笔记)— 第一章 HTML与XHTML参考

    1. 对齐常量(text-align和vertical-align) 1.1 盒外对齐 这种对齐属性决定环绕着元素外部矩形空间的文本对齐方式.W3C中,这类HTML元素包括:applet.iframe ...

  5. netty开发教程(一)

    Netty介绍 Netty is an asynchronous event-driven network application framework  for rapid development o ...

  6. 配置nginx以获取真实的客户端ip地址

    当我们使用了nginx来转发客户端的请求以后,tomcat是无法正确获取到客户端的ip地址的,而是获取到配置了nginx的那台服务器的ip地址.因为tomcat所接收到的请求是通过nginx发出来的( ...

  7. 在windows平台使用Apache James搭建邮件服务器以及使用C#向外网发送邮件

    首先环境搭建: 1.下载安装JDK,并且配置环境变量 2.下载Apache James ,下载解压之后的目录如图 双击bin下边的run.bat批处理文件安装James 服务,提示如下信息说明安装成功 ...

  8. redis的事务(简单介绍)

    1.简单描述 redis对事务的支持目前还是比较简单.redis只能保证一个client发起的事务中的命令是可以连续的执行,而中间不会插入其他client的命令.由于redis是但现场来处理所有cli ...

  9. 开源免费接口管理平台eoLinker AMS开源版 V3.2.0更新,增加批量导出导入接口功能!

    eoLinker是一个免费开源的针对开发人员需求而设计的接口管理工具,通过简单的操作来帮助开发者进行接口文档管理.接口自动化测试.团队协作.数据获取.安全防御监控等功能,降低企业的接口管理成本,提高项 ...

  10. acffo的开源项目汇总

    1. XWaveView, 流动波浪效果                      2.LogRecordHelper, logcat日志记录存储到文件 可以指定TAG , 将logcat日志写入文件 ...