●后端渲染 (存在性能问题)【假设页面存在客户需要经常提交表单这样的数据交互，后端就会造成网页的频繁刷新，体验感非常差】
●Ajax前端渲染 (前端渲染提高性能，肃然提高了用户体验，但是不支持浏览器的前进后退操作，不能看见页面的浏览状态) ●SPA (Single Page Application)单页面应用程序:整个网站只有一个页面， 内容的变化通过Ajax局部更新实现、同时支持浏览器地址栏的前进和后退操作 ●SPA实现原理之一 : 基于URL 地址的hash (hash的变化会导致浏览器记录访历史的变化、但是hash的变化不会触发 新的URL请求) ●在实现SPA过程中， 最核心的技术点就是前端路由
点击相应的菜单，出来相应的页面
图片直接去网上截图即可
现在通过简易路由------点击不同的菜单展示不同的页面
监听window的onhashchange事件，根据获取到的最新的hash值没切换要显示的组件的名称
window.οnhashchange=function(){
//通过locationhash获取到最新的hash值
}
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> -->
<script src="./vue-2.6.12.js"></script>
</head>
<body>
<div id="app">
<a href="#">我的资讯</a>
<a href="#information">咨询</a>
<a href="#play">娱乐</a>
<a href="#life">生活</a>
<a href="#tec">科技</a>
<a href="#">健康</a>
<a href="#">美食</a>
<a href="#">汽车</a>
<a href="#">...</a>
<!-- 注意：哈希值前面必须是有#的 -->
<!-- 事件的关系，我们只有2-5的菜单时可以跳转的 -->
<component :is="comName"></component>
<!-- :is 指定组件的名称，把对应的组件渲染到component标签所在的位置 -->
<!-- component 标签，相当于组件的占位符 -->
</div>
<script>
const information={
template:`
<div>
<h1>热门推荐</h1>
<p>
<input type="radio" checked >
正在关注
</p>
<img src="images/1.png" width="100%">
</div>
`,
}
const play={
template:`
<div>
<h1>娱乐</h1>
<p>
<input type="radio" checked >
正在关注
</p>
<img src="images/2.png">
</div>
`,
}
const life={
template:`
<div>
<h1>生活</h1>
<p>
<input type="radio" checked >
正在关注
</p>
<img src="images/3.png">
</div>
`,
}
const tec={
template:`
<div>
<h1>科技</h1>
<p>
<input type="radio" checked class="bg-succuess">
正在关注
</p>
<img src="images/4.png">
</div>
`,
}
var vm=new Vue({
el:"#app",
// 动态数据
data(){
return{
comName:"information",
}
},
//注册私有组件
components:{
information,//资讯组件
play,//娱乐组件
life,//生活组件
tec,//科技组件
}
})
// window.onhashchange获取到最新的hash值 从而用来切换组件的名称
window.οnhashchange=function(){
// 通过location.hash 获取到最新的hash值
console.log(location.hash)
vm.comName=location.hash.slice(1)
}
</script>
</body>
</html>
307
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
