vue-路由-基本概念与原理
目录
内容
路由的本质就是对应关系。
在开发中,路由分为:
- 后端路由
- 前端路由
1.1、后端路由
- 概念:根据不同的用户URL请求,返回不同的内容
- 本质:URL请求地址与服务器资源的对应关系
1.2、SPA(single page application)
- 后端渲染(存在性能问题)
- Ajax前端渲染(前端渲染提高性能,但是不支持浏览器的前进后退操作)
- SPA(singel page application)单页面应用程序:整个网站只有一个页面,内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进后退操作
- SPA实现原理之一:基于URL地址的hash(hash的变化会导致浏览器访问历史记录的变化、但是hash的变化不会触发新的URL请求)
- 在实现SPA过程中,最核心的技术点就是前端路由
1.3、前端路由
- 概念:根据不同的用户事件,显示不同的页面内容
- 本质:用户事件与事件处理函数之间的对应关系
1.4、实现简易的前端路由
-
原理:通过监听window的onhashchange,获取最新的hash值,根据hash值切换对应的组件
-
代码1.4-1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简易前端路由</title> </head> <body> <div id="app"> <a href="#/zhuye">主页</a> <a href="#/keji">科技</a> <a href="#/caijing">财经</a> <a href="#/yule">娱乐</a> <!-- 组件占位符 --> <component :is="comName"></component> </div> <script src="../../node_modules/vue/dist/vue.js"></script> <script> const zhuye = { template: `<h1>主页信息</h1>` } const keji = { template: `<h1>科技信息</h1>` } const caijing = { template: `<h1>财经信息</h1>` } const yule = { template: `<h1>娱乐信息</h1>` } const vm = new Vue({ el: '#app', data: { comName: 'zhuye' }, components: { zhuye, keji, caijing, yule } }) // 监听window的onhashchange事件,根据获取最新的hash值,切换显示对应的组件 window.onhashchange = function () { console.log(location.hash.slice(1)); switch (location.hash.slice(1)) { case '/zhuye': vm.comName = 'zhuye' break; case '/keji': vm.comName = 'keji' break case '/caijing': vm.comName = 'caijing' break case '/yule': vm.comName = 'yule' break default: break; } } </script> </body> </html>
后记 :
vue官网地址:https://cn.vuejs.org/
本项目为参考某马视频开发,相关视频及配套资料可自行度娘或者联系本人。上面为自己编写的开发文档,持续更新。欢迎交流,本人QQ:806797785
前端项目源代码地址:https://gitee.com/gaogzhen/vue
后端JAVA源代码地址:https://gitee.com/gaogzhen/JAVA