Vue路由模式有哪几种?(Vue两种路由模式的区别)
vue路由模式有哪几种?Vue Router 是Vue官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌。vue-router 默认hash 模式,还有一种是 history 模式,vue两种路由模式的区别。
一、hash模式:
1、hash 模式的工作原理是 hashchange 事件,可以在window监听 hash 的变化。我们在url后面随便添加一个#xxxx就可以触发这个事件;
2、url路径会出现 # 字符;
3、hash值不包括在 HTTP 请求中,它是交由前端路由处理,所以改变hash值时不会刷新页面,也不会向服务器发送请求;
4、hash值的改变会触发hashchange事件。
二、history模式:
1、整个地址重新加载,可以保存历史记录,方便前进后退;
2、使用 HTML5 API(旧浏览器不支持)和 HTTP服务端配置,没有后台配置的话,页面刷新时会出现404。
三、如果vue-router使用history模式,部署时要注意什么?
HTTP 服务端需要进行配置,将页面请求全部重定向到 index.html。参考官方文档
四、nginx 配置:
location / { try_files $uri $uri/ /index.html; }
除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址:https://tangjiusheng.com/vue/321.html
原文地址:https://tangjiusheng.com/vue/321.html
大家都在看
- vue打包部署生产环境nginx(前端vue打包后部署方式流程)
- Vue-Router中文官网
- vue-devtools详细安装教程(vue项目中vue-devtools怎么用)
- vue3生命周期详解(vue2与vue3的生命周期对比)
- vscode打开vue前端项目(vscode开发vue装什么插件)
- vue框架大概要学多久(前端vue要学5天就会方法)
- vue.extend的用法(vue.extend和vue.component的区别)
- vue3中的readonly单向数据流函数(readonly函数使用详解)
- vue和React区别先学哪个?
- vue过滤器如何使用(前端vue常用的10个过滤器)