特别提醒:开启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. Mybatis框架解析之Builder解析

    首先我们从builder这个类入手,首先我们注意到BaseBuilder,其实它的本质上市一个抽象类,它从本质上抽象出了Builder的一切,我猜想这里一定使用了建造者模式,但是这个抽象类里面居然没有 ...

  2. python爬虫(七)_urllib2:urlerror和httperror

    urllib2的异常错误处理 在我们用urlopen或opener.open方法发出一个请求时,如果urlopen或opener.open不能处理这个response,就产生错误. 这里主要说的是UR ...

  3. 利用linux shell自己主动顶贴

    在论坛上面发帖问个什么东西的话,一旦不顶.帖子就秒沉了,可是又实在不想每时每刻都去顶,怎么办?以下展示了怎样利用shell 的crontab实现自己主动顶贴. 闲话不多说了,以豆瓣为例-– 1: 用c ...

  4. MQTT 简介

    MQTT 全称是 Message Queue Telemetry Transport,是一个轻量级的“发布/订阅”消息传输协议. 官网 http://mqtt.org/ 发布/订阅 MQTT 的基本概 ...

  5. Python笔记·第九章—— 函数 (一)

    一.函数的作用 函数可以让我们代码结构更清晰,而且避免了代码的重复,冗余,使一段代码或者功能可以反复的被调用,大大提高了开发效率 二.函数的定义 def 函数名(参数1,参数2,*args,默认参数, ...

  6. Mybatis(基于SqlSessionTemplate的实现) + Spring 练习实战

    mybatis学习篇:上次使用映射接口实现Mybatis,有不方便指出就是需要接口,且需要保证接口上不能存在其他的代理.这次通过SqlSessionTemplate基于模板类实现Mybatis,总的来 ...

  7. git更新失败Probably the path to Git executable is not valid

    git更新代码失败 检查setting配置,发现路径配置错误 找对git的安装目录,修改路径后保存即可

  8. python列表的操作

    1.列表的增加: li=[] li.append("hha") print(li) li=[] li.append("hha") print(li) li.in ...

  9. JavaScript中DOM节点层次Text类型

    文本节点 标签之间只要有一点内容都会有文本节点,包括空格 创建文本节点document.createTextNode() 可以使用 document.createTextNode 创建新文本节点 == ...

  10. 用Azure AD 实现Web 应用身份认证的Multi-Factor Authentication(MFA)

    最近客户有个需求,希望把面向public的Web应用中的终端用户数据库由Azure AD来实现,同时希望可以用MFA来实现用户身份认证.这个想法非常好,通过使用Azure的managed servic ...