标签：数据 const ons ajax class 属性 假设 区域 viewport
路由的概念路由的本质就是一种对应的关系，比如说我们在url中地址中输入我们需要访问的url地址之后，浏览器要去请求这个url地址对应的资源那么url地址和真实的资源之间就有一种对应关系，就是路由1.概念：根据不同的用户URL请求，返回不同的内容2.本质：URL请求地址与服务器资源之间的对应关系前端路由1.概念：根据不同的用户事件，返回不同的页面内容2.本质：用户事件与事件处理函数之间的对应关系
最初页面的渲染是由后端路由来实现的但是后端渲染存在性能问题即：假设用户和服务器经常有提交表单这样的行为后端路由就会导致页面被频繁的刷新导致用户体验会非常的差。因此出现了Ajax技术，可以实现页面上的局部刷新，极大地提高了用户使用体验。但是单纯的Ajax技术不支持浏览器的前进和回退的这样的历史操作，没办法保存用户在浏览器中的保留的状态。因此，出现了SPA：单页面应用程序，所谓的SPA就是整个网站只有一个网页，内容的变化是通过Ajax局部更新同时支持浏览器的前进和后退实现SPA过程中，最核心的技术点就是前端路由 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<!-- 导入 vue 文件 -->
<script src="./lib/vue_2.5.22.js"></script>
</head>
<body>
<!-- 被 vue 实例控制的 div 区域 -->
<div id="app">
<!-- 切换组件的超链接 -->
<a href="#/zhuye">主页</a>
<a href="#/keji">科技</a>
<a href="#/caijing">财经</a>
<a href="#/yule">娱乐</a>
<!-- 根据 :is 属性指定的组件名称，把对应的组件渲染到 component 标签所在的位置 -->
<!-- 可以把 component 标签当做是【组件的占位符】 -->
<component :is="comName"></component>
</div>
<script>
// #region 定义需要被切换的 4 个组件
// 主页组件
const zhuye = {
template: ‘<h1>主页信息</h1>‘
}
// 科技组件
const keji = {
template: ‘<h1>科技信息</h1>‘
}
// 财经组件
const caijing = {
template: ‘<h1>财经信息</h1>‘
}
// 娱乐组件
const yule = {
template: ‘<h1>娱乐信息</h1>‘
}
// #endregion
// #region vue 实例对象
const vm = new Vue({
el: ‘#app‘,
data: {
comName: ‘zhuye‘
},
// 注册私有组件
components: {
zhuye,
keji,
caijing,
yule
}
})
// #endregion
// 监听 window 的 onhashchange 事件，根据获取到的最新的 hash 值，切换要显示的组件的名称
window.onhashchange = function() {
// 通过 location.hash 获取到最新的 hash 值
console.log(location.hash);
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
}
}
</script>
</body>
</html>标签：数据 const ons ajax class 属性 假设 区域 viewport
原文地址：https://blog.51cto.com/13524641/2519875
