js实现路由跳转

最新推荐文章于 2024-07-17 20:15:37 发布

aeoliancrazy

最新推荐文章于 2024-07-17 20:15:37 发布

阅读量6.5k

点赞数

分类专栏： Js 文章标签： javascript 路由

本文链接：https://blog.csdn.net/aeoliancrazy/article/details/77981555

版权

Js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js实现路由跳转

从网上查看的资料来看，基本都是通过hash的方式来实现的

一般就是监听地址栏的hash

在操作地址栏的时候并实现一些功能

下面有两端代码端都是可以运行的

一种是定义了路由的

下面的这一段代码端不是我原创的
是我引用的别人的，忘了复制他的链接，sorry

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <ul> 
    <li><a href="#/">turn white</a></li> 
    <li><a href="#/aa">turn blue</a></li> 
    <li><a href="#/green">turn green</a></li> 
</ul> 

<div id="t11">
    23131
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js">

</script>
        <script type="text/javascript">
            function Router() {
    this.routes = {};
    this.currentUrl = '';
}
Router.prototype.route = function(path, callback) {
    this.routes[path] = callback || function(){};
};
Router.prototype.refresh = function() {
    this.currentUrl = location.hash.slice(1) || '/';
    this.routes[this.currentUrl]();
};
Router.prototype.init = function() {
    window.addEventListener('load', this.refresh.bind(this), false);
    //监听hashchange，hash的改变
    window.addEventListener('hashchange', this.refresh.bind(this), false);
}
//定义完了，初始化
window.Router = new Router();
window.Router.init();

var content = document.querySelector('body');
var t11 = document.querySelector('#t11');
// change Page anything
// 此处可以添加函数，修改对应的页面
function changeBgColor(color) {
    content.style.backgroundColor = color;
}
function changeDisplay(display){
    t11.style.display = display;
}

Router.route('/', function() {
    changeBgColor('white');
    changeDisplay('none');

});
Router.route('/blue', function() {
    changeBgColor('blue');
    changeDisplay('block');
});
Router.route('/green', function() {
    changeBgColor('green');
    changeDisplay('block');
});
        </script>
    </body>
</html>

一种是直接location.hash修改的，就是通过js操作地址栏

此篇是参考的菜鸟教程的代码段

部分的注释是我根据自己的理解添加的

查看这一篇的方法，我似乎没有找到子路由的设置方式，也就是说这个设置的路由只有一层

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>

<body>

<p>该实例演示了如何使用 addEventListener()方法 向 body 元素中添加 "onhashchange" 事件。</p>
<p>点击按钮修改当前 URL 的锚部分为 #part5</p>
<button onclick="changePart()">点我</button>
<p id="demo"></p>
<script>
// 使用 location.hash 属性来修改锚部分，我理解地址栏的路径，也理解为路由
function changePart() {
//change page anything
//在这个函数（方法）里面就可以对页面进行设置了
location.hash = "part5";//改变当前地址栏的url，添加了路由part5，为防止浏览器全局渲染，只渲染对应的部分
var x = "锚部分现在为: " + location.hash;
document.getElementById("demo").innerHTML = x;
}


window.addEventListener("hashchange", myFunction);//监听hash改变事件，并调用函数
function myFunction() {
console.log("路由已修改！");
}

</script>

</body>

</html>