目前,前端中所有的MVVM框架中基本都有自己的Router组件,比如React-router或者Vue-router,主要的作用就是通过拦截url来返回相应的组件。如果我们通过原生js来实现一个类似的router,应该怎么做呢?本文将提供一个思路和完整demo,以解释其中的原理。
一.效果图
二.代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="author" content="helang.love@qq.com">
<title>前端路由</title>
<style type="text/css">
.router_box,
#router-view {
padding: 0 20px;
background-color: gainsboro;
height: 55px;
line-height: 50px;
}
.router_box>a {
padding: 0 10px;
color: #364086;
}
.content{
border: 1px solid #a030b3;
}
</style>
</head>
<body>
<div class="router_box">
<a href="/home" class="router">主页</a>
<a href="/sort" class="router">分类</a