实际上存在三种模式:

  Hash:      使用URL的hash值来作为路由。支持所有浏览器。

  History:   以来HTML5 History API 和服务器配置。参考官网中HTML5 History模式

  Abstract: 支持所有javascript运行模式。如果发现没有浏览器的API,路由会自动强制进入这个模式。

 vue-router中默认使用的是hash模式,也就是会出现如下的URL:,URL中带有#号

 我们可以用如下代码修改成history模式

import Vue from 'vue'
import Router from 'vue-router'
import Main from '@/components/Main'
Vue.use(Router) export default new Router({
mode: 'history',
routes: [
{
path: '/',
component: Main
}
]
})

vue-router 路由模式有几种?的更多相关文章

  1. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

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

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

  3. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  4. vue router mode模式在webpack 打包上线问题

    vue-router mode模式有两种 hash和history. 1.hash —— 即地址栏 URL 中的 # 符号.比如这个 URL:http://www.abc.com/#/hello,ha ...

  5. 04 Vue Router路由管理器

    路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...

  6. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

  7. Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转

    问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...

  8. Vue Router 路由守卫:完整的导航解析流程

    完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...

  9. Vue Router 路由实现原理

    一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash  ...

  10. Vue - Router 路由

    路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

随机推荐

  1. ExpiringMap学习总结

    一.ExpiringMap简介 ExpiringMap是一个轻量级的Java缓存方式 针对一些小体量的项目,存储的数据量也不是很大(如校验码)的情况下,使用Redis会增加系统的复杂性和维护难度.它的 ...

  2. python教程3.2:字典

    字典相比较列表,优势:查找key的需求,列表需要遍历,字典查找速度很快,很方便, 定义  特性 查找.增加和修改操作  删除操作 循环操作  全局函数

  3. .net core 微信支付-微信小程序支付(服务端C#代码)

    前言 前段时间研究了下微信支付-小程序支付的功能.但微信支付文档中关于.net C#的语言的sdk没有,只有java go 和php版本的,当然社区也有很多已经集成好的微信支付.net core sd ...

  4. 在线电子表格编辑器 Luckysheet

    下载地址 不知道地址正不正经,我先用着,网上找的地址,不知道是不是可信任的,疑似官网的两个地址都打不开, https://github.com/dream-num/Luckysheet zip包  h ...

  5. asp.net core api 3.1 dynamic 入参转json对象

    比如接口 public object GetList(dynamic obj){ //var jElement=(JsonElement)obj;//使用system.text.json处理 var ...

  6. Django模板templates

    1.模板文件的路径配置 2.模板中变量替换 3.变量渲染之深度查询 4.内置过滤器 过滤器的语法: {{obj|过滤器名称:过滤器参数}} 内置过滤器: 过滤器例子: 5.注释 6.多行注释 7.if ...

  7. Django——form组件之循环生成标签

    from django.contrib import admin from django.urls import path from app01.views import index urlpatte ...

  8. vscode开发一个luaIDE插件

    基础知识 环境准备 node.js 下载后下一步下一步即可安装成功,推荐LTS版本 yeoman 脚手架工具,也就是快速帮你新建一个插件所需的目录的工具,在工作目录下cmd,输入下列命令即可安装 np ...

  9. 一文带你理解透MyBatis源码

    本文分享自华为云社区<一文彻底吃透MyBatis源码!!>,作者:冰 河. 写在前面 随着互联网的发展,越来越多的公司摒弃了Hibernate,而选择拥抱了MyBatis.而且,很多大厂在 ...

  10. kubernetes的搭建(一)

    集群的搭建 集群的类型 kubunetes的集群类型大致上分为两类: 一主多从和多主多从. 一主多从: 一台master节点和多台node节点,搭建简单,但是有单机故障的风险,适用于测试环境 多主多从 ...