vue-router 的URL路径中#的意义
Vue 路径 url Router 意义
2023-09-11 14:22:49 时间
传送门 https://router.vuejs.org/zh-c...
Router 构造配置
routes
-
类型:
Array<RouteConfig>
RouteConfig
的类型定义:declare type RouteConfig = { path: string; component?: Component; name?: string; // 命名路由 components?: { [name: string]: Component }; // 命名视图组件 redirect?: string | Location | Function; props?: boolean | string | Function; alias?: string | Array<string>; children?: Array<RouteConfig>; // 嵌套路由 beforeEnter?: (to: Route, from: Route, next: Function) => void; meta?: any; // 2.6.0+ caseSensitive?: boolean; // 匹配规则是否大小写敏感?(默认值:false) pathToRegexpOptions?: Object; // 编译正则的选项 }
mode
-
类型:
string
-
默认值:
"hash" (浏览器环境) | "abstract" (Node.js 环境)
-
可选值:
"hash" | "history" | "abstract"
配置路由模式:
-
hash
: 使用 URL hash 值来作路由。支持所有浏览器,包括不支持 HTML5 History Api 的浏览器。 -
history
: 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。 -
abstract
: 支持所有 JavaScript 运行环境,如 Node.js 服务器端。如果发现没有浏览器的 API,路由会自动强制进入这个模式。
-
现在前端路由的3种模式,常用的是 hash模式(地址有 # 号) 和 history模式 (地址和真实请求没区别)
另外,
#
是 vue-router 使用的hash符号
#!
是 angularjs Route 使用的hash符号
这个无所谓, 有 # 就行(浏览器不会发生页面跳转)
#是hash模式
history模式不带#号,
但部署到服务器的话
hash模式不会出现刷新404问题。。
history模式如果刷新或者直接连接进入某个页面,会提示404。。。
传统方式,后端程序会实际生成一个文件,连接请求能真的找到一个文件。。
这种单页式只有一个html,也不是后端程序不会自动生成文件。。
所以如果用history模式,部署到服务器的时候需要配置虚拟路径
如果请求不到资源的情况下都指向index.html文件
相关文章
- 【Vue】import和export
- vue基础篇---路由的实现
- Vue - 实现信纸输入写作,类似写明信片时的一张背景图片 + 横格纸效果(信纸格子与文字自动对齐、支持自定义背景图、文字或横线大小与颜色,一切由您 DIY 自定义样式)纯CSS完成支持任何vue项目
- Vue——vue中的双向数据绑定
- vue-devtools 获取到 vuex store 和 Vue 实例的?
- 【面试Vue全家桶】vue前端交互模式-es7的语法结构?async/await
- vue生成环境 访问路径配置
- vue 组件 模板中根数据绑定需要指明路径并通信父
- Vue之x-template(1)
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- vue学习笔记五:Jquery VS Vue之事件监听明细对照
- vue学习笔记十:Jquery VS Vue之页面动画明细对照
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- Vue CLI 4.0 关于 webpack 基本配置范例
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- Vue-监视属性(watch)简单说明和使用