特别提醒:开启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. mysql数据库插入数据获取自增主键的三种方式(jdbc PreparedStatement方式、mybatis useGeneratedKeys方式、mybatis selectKey方式)

    通常来说对于mysql数据库插入数据获取主键的方法是采用selectKey的方式,特别是当你持久层使用mybatis框架的时候. 本文除此之外介绍其它两种获取主键的方式. 为了方便描述我们先建一张my ...

  2. 升级安装php7要考虑的几个方面

    php7从推出到现在,前两天官方已经发布到7.2版本,把自己升级和安装php7中遇到的问题和解决方法做一个笔记,内容主要包括:1) mysql2) php3) nginx4) memcache扩展5) ...

  3. cocos2d+TexturePackerGUI动画制作

    转载请注明出处:http://blog.csdn.net/oyangyufu/article/details/25168047 程序效果图: 1.下载安装TexturePackerGUI 地址:htt ...

  4. Maven构建真正的J2EE项目

    今天同事问起我眼下用Maven构建的多模块项目架构和曾经用Eclipse创建的Web项目的问题.以下将讲一下使用maven搭建多模块的J2ee项目,以及採用这样的方式搭建项目对日后项目的水平拆分和垂直 ...

  5. Unity打包android的apk与数据包.obb分离和apk签名

    那么,通过以上图片.我相信大多数人已经知道怎么创建了,apk签名比較简单,假设之前没有签名文件.那么选择图中的Create New Keystore然后在以下两个password框中输入passwor ...

  6. ML02: 机器学习KNN 算法

    摘要: 一张图说清楚KNN算法 看下图,清楚了吗?   没清楚的话,也没关系,看完下面几句话,就清楚了. KNN算法是用来分类的. 这个算法是如何来分类的呢? 看下图,你可以想想下图中的 『绿色圆点』 ...

  7. java实现播放mp3功能

    1.首先引入jlayer.jar <!-- https://mvnrepository.com/artifact/javazoom/jlayer --> <dependency> ...

  8. 自学Zabbix3.9.3-模板Templates-嵌套Nesting

    自学Zabbix3.9.3-模板Templates-嵌套Nesting 嵌套是一个模板包含一个或多个其他模板的方法.可以在一个"嵌套"模板中将一些模板链接在一起.嵌套的好处在于,只 ...

  9. SSH简单项目

    这是我学习SSH整合时的一个测试项目,代码比较简单 整个项目实现从数据库中取数据,在页面上显示.项目的结构如下: (1)数据库设计 数据库使用的是student数据库中的一个数据库表grade,表的内 ...

  10. Sphinx学习笔记(一)

    最近负责一个项目,需要用到全文检索,我的环境大体如下:       1.数据保存在MySQL中     2.需要支持中文检索     3.尽可能的简单       选择了Sphinx,至于solr和E ...