Vue 路由router的两种模式
两种模式
在vue中 路由router可以有两种模式可选 hash和history。设置方式就是设置Router的mode属性 如下
import Vue from vue import Router from vue-router import HelloWorld from /components/HelloWorld Vue.use(Router) export default new Router({ // mode: history , routes: [ path: / , name: HelloWorld , component: HelloWorld 复制代码
Vue中默认是hash模式 所以不需要设置mode 如果想使用history模式 只需要将mode设置为‘history’即可。
下面简单看看两者的不同
如果使用的是hash模式 url中就会存在“#“符号 这个符号后面的是路径。比如我们访问http://localhost:8080/ 会看到浏览器自动添加成http://localhost:8080/#/
如果我们要访问 /test 路径 则url为http://localhost:8080/#/test 而http://localhost:8080/test 不可以
如果使用的是history模式 则url没有“#“符号 路径与传统网址一样 如http://localhost:8080/ 和 http://localhost:8080/test但是这只是表面现象 这两种模式本质的区别是什么
要理解hash模式 就先要知道history模式 因为hash模式是解决问题出现 知道问题是什么就很容易理解hash模式。
history模式就是我们传统的路径 url中的路径就是服务端根目录下的相对路径 是真实路径。
比如http://localhost:8080/test/123.html 则就需要在根目录下有test文件夹 文件夹下有123.html这个文件。
但是如果我们没有这个文件 而是用vue这种router的方式呢
那么就必须用nginx代理 否则找不到这个文件就是返回404。
这样就需要在nginx中配置每一个route 漏下一个就会404
所以history模式下的路由分发是服务端 nginx 来做的
为了解决上面的问题 hash模式出现了。在hash模式的url中“#“符号后面的路径并不是真实路径 而是以类似参数的形式传给默认文件。
默认文件就是index 在这里通过“#“符号后面的路径去匹配路由处理 所以只要有index这一个文件是真实路径就可以。
这样就不需要在nginx一个个配置了。
这样hash模式下的路由分发就不需要服务端来做了 直接在前端就处理了。
当然相对于hash模式 history模式也有优势 根据 Mozilla Develop Network 的介绍 调用 history.pushState() 相比于直接修改 hash 存在以下优势:
pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL 而 hash 只可修改 # 后面的部分 因此只能设置与当前 URL 同文档的 URL
pushState() 设置的新 URL 可以与当前 URL 一模一样 这样也会把记录添加到栈中 而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中
pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中 而 hash 只可添加短字符串
pushState() 可额外设置 title 属性供后续使用。
【多级路由使用】Vue中路由嵌套 在之前的一级路由中,我们解决了原生中的抖动问题,以及代码冗余问题,但是现在还有一个问题没有解决,那就是如果有多个需要跳转的那该怎么办呢?
相关文章
- vue - 路由传递参数
- 【Vue】通过keep-alive实现路由组件的数据缓存
- vue 动态绑定change事件
- Vue创建一个路由项目(Vue Router)
- Vue - Router 路由跳转传参(对象 / 数组)目标页面刷新后参数丢失问题解决方案
- Vue项目--尚品汇(购物车页面的一些操作(修改数量,勾选,删除等))
- vue插件
- vue项目防御XSS
- vue-cli运行报错
- vue 3.0 项目搭建移动端 (六) 命名路由同级控制
- Vue--路由带参跳转--/login?id=10--接收this.$route.query.id
- VUE-007-通过路由 router.push 传递 query 参数(路由 name 识别,请求链接显示参数传递)
- 单页vue路由router
- Vue+Echarts监控大屏实例一:软件系统运行监控模板实例
- vue-router路由安装与使用
- vue中a的href写法
- vue+leaflet示例:geojson数据地形剖面分析(附源码下载)
- vue-router路由模式详解
- vue-router路由元信息详解
- vue基础八(路由组件)
- vue前台(七)
- Vue学习第27天——路由vue-router的详解及案例练习
- vue中created、mounted等方法整理
- 20.0 vue3中使用vue-router路由跳转,参数(query,params)的传递与接收(包括请求操作)