什么是路由&简单实现前端路由
2023-06-08 本文已影响0人
小黄不头秃
路由：是一个比较广义和抽象的概念，路由的本质就是对应关系，即：url和服务器对应资源的对应关系。
可以理解为：
- 根据不同的用户事件显示不同的页面内容
- 用户事件和事件处理函数的对应关系
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</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="./vue/vue.js"></script>
<script>
/**
路由：是一个比较广义和抽象的概念，路由的本质就是对应关系
后端路由：（后端渲染，存在性能问题）
url和服务器对应资源的对应关系
前端路由（负责事件监听）
根据不同的用户事件显示不同的页面内容
用户事件和事件处理函数的对应关系
**/
// 实现简单前端路由
/**
基于url中的hash实现（点击菜单的时候改变url的hash，根据hash改变控制组建的切换）
监听windows的onhashchange 事件，根据获取的最新的hash值切换显示的组件的名称
window.onhashchange = function(){
//
}
*/
// 定义需要被切换的4个组件
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 = function(){
// 通过location.hash 获取最新的hash值
console.log(location.hash);
switch(location.hash){
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>
