用js写hash路由

最新推荐文章于 2021-10-25 15:46:43 发布
最新推荐文章于 2021-10-25 15:46:43 发布
阅读量265 收藏
点赞数
分类专栏： js 文章标签： hash
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43486347/article/details/103681185
版权

用js写hash路由

<body>
    <ul>
        <li><a href="#/aaa">AAA</a></li>
        <li><a href="#/bbb">BBB</a></li>
        <li><a href="#/ccc">CCC</a></li>
        <li><a href="#/ddd">DDD</a></li>
    </ul>
    <div id="container">

    </div>
    
    <script>
        // axios.get(URL).then((res)=>{
        //     const {status,data} = res
        //     if(status === 200 && data.length){
        //         console.log(data)
        //     }
        // }).catch((err)=>{

        // })
        var div= document.getElementById("container")
        window.onhashchange = ()=>{
         var hash =  location.hash.replace('#','')
         console.log(hash)
         switch(hash){
            case '/aaa':
                div.innerText ='AAA'
                break;
            case '/bbb':
                div.innerText ='BBB'
                break;
            case '/ccc':
                div.innerText ='CCC'
                break;
            case '/ddd':
                div.innerText ='DDD'
                break;
            default:break
         }
        }
    </script>
抑制、
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
用js写的一个路由(简单实例)
10-21
在JavaScript中，路由是一种用于管理应用程序不同页面或视图的技术，尤其在单页应用程序（SPA）中至关重要。本文将通过一个简单的实例介绍如何使用纯JavaScript编写一个基本的路由系统。 首先，我们需要理解路由的...
js单页hash路由原理与应用实战详解
10-19
JavaScript 单页应用（Single Page Application，SPA）中的 Hash 路由是一种常见的导航机制，它允许我们在不刷新整个页面的情况下，通过改变浏览器 URL 的 Hash 部分来切换页面内容。这种技术对于构建交互性更强、...
js 哈希路由原理实现
weixin_30595035的博客
12-16 193
在 js中，有一种方法，可以在不刷新页面的情况下，页面的内容进行变更，ajax是一种，这里介绍另一种，就是 哈希路由原理 先看一个简单的路由和页面内容关联的例子，要实现两个功能： 1.1.浏览器的路由变化，页面内容跟着变化 1.2.页面内容变换，浏览器的内容跟着变化 实现过程： 1.3.设定一个页面按钮，点击按钮时，改变页面的内容 1.4.设定浏览器的内容，跟随页面内容...
hash 路由和 history 路由的原生 JS 实现
火锅国刘dada的博客
10-25 1249
React 和 Vue 中都有 HashRouter 和 Router；本文用来理清路由的概念，并且使用原生 JS 实现 hash 路由 和history 路由；文章的最后是对 History 对象 和 window.history 的简要介绍，以便于理解 history 路由； React-router GitHub仓库 Vue-router GitHub仓库 1、概述 在以前的多页应用(MPA)中，路由主要由后端实现，并且每次访问新内容都要重新刷新整个页面，这对服务端造成了性能压力，也影响浏览器上用户体
js实现hash路由原理
ZFZ5720
11-06 867
简单的上下布局，点击左侧导航，中心内容跟对变化，主要技术是检测路由的hashchange事件 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-s...
Hash 路由的简单封装
qq_42941302的博客
09-19 292
hash 路由的封装 路由的使用 既然要封装，必须先知道要封装什么东西，所以要根据使用的方法来封装功能 const router = new Router({ // 路由的选择，本篇只封装hash路由 mode: 'hash', // 路由表的配置 routes: [ { path: '/', template: home }, { path: '/
js单页hash路由原理与应用实战详解.docx
01-21
js单页hash路由原理与应用实战详解.docx
JS实现前端路由功能示例【原生路由】
10-15
本文将深入探讨如何使用JavaScript原生方法实现前端路由，并提供一个简单的示例。 前端路由的主要目的是管理页面的导航和内容展现，它通过监听URL的变化，根据不同的路径执行不同的操作，如加载不同的组件或数据。...
js中hash和ico的关联分析
10-24
总结来说，`js` 中`hash`与`ico`的关联主要体现在`location.hash`的设置可能会影响到`ico`的加载，尤其是在异步操作如`ajax`请求中。通过合理控制`hash`的设置时机，可以有效地解决这类问题。在编写JavaScript代码时...
html5 hash,url的hash模式和html5的history模式异同
weixin_39968946的博客
06-29 107
链接文章：https://blog.csdn.net/fifteen718/article/details/82529433相同点：都不会实际上向后端发送请求。不同点：history模式里面push方法可以back，如果用replaceState的话不可以back，history.go(-1)==pop。可以直接跳到push栈的某一步。history.forward()==history.go(1...
react之hash值变化
newway007的博客
11-15 1947
import React from "react"; import PropTypes from 'prop-types' class Router extends React.Component{ constructor(props) { super(props); this.state = { hash: window.location.hash } } st...
js实现简单前端路由--hash方式
chenyang_cy的博客
04-26 3351
在单页面应用程序（SPA）中，前端通过url的改变来渲染不同的页面, 但希望能将url的页面记录下来。这样可以使用浏览器的后退前进键来返回上一页。要实现这一点，首先要实现前端路由。根据路由的不同，渲染不同页面，执行不同方法。简单的前端路由有两种实现方式：1. hash2.history API//---------------------------------------------------...
HTML页面的哈希（hash）路由原理+原生js案例
Lee的430博客
04-28 5053
&lt;!-- * 场景:不刷新页面，对页面的局部内容进行更改 *方案1：ajax 方法 *方案2：哈希（hash）路由原理 *方案2讲解：监听浏览器的url中的hash（url的#后面的文本——锚文本）值，进行更改内容 --&gt; &lt;!DOCTYPE html&gt; &lt;html lang="cn"&gt; &lt;head&gt; &lt;meta charset="UT...
原生JS实现一个简单的前端路由（路由实现的原理）
热门推荐
笋芯
09-19 3万+
一个极简前端路由实现 说一下前端路由实现的简要原理，以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。直接看代码或许更直观。 function Router() { this.routes = {}; this.curr
js url正则解析
jianleking的专栏
10-27 1412
1.正则 /^(?:(\w+):\/\/)?(?:(\w+):?(\w+)?@)?([^:\/\?#]+)(?::(\d+))?(\/[^\?#]+)?(?:\?([^#]+))?(?:#(\w+))?/ 2.代码示例 var pattern = /^(?:(\w+):\/\/)?(?:(\w+):?(\w+)?@)?([^:\/\?#]+)(?::(\d+))?(\/[^\?#...
vue篇-修改路由的hash模式、router-link补充、路由的知识点
liumuye88888的博客
06-07 3972
目录1.修改路由的hash模式2.router-link补充3.通过代码跳转路由4.动态路由的使用5. $router和 $route的区别 1.修改路由的hash模式 2.router-link补充 3.通过代码跳转路由 // this.$router.push('/about') this.$router.replace('/about') //没有记录不能回退 4.动态路由的使用 1.首先要在router>index.js配置的时候,给path后面添加一个动态属性 {
前端路由实现（hash）
天空影
06-06 2075
接上文：ajax引入html文件 因为后来想着用a 标签点击和获取地址栏 hash 值来动态引入不同的内容，但是发现需要兼顾的太多，所以就放弃原始方法改用前端路由 来做，前端路由又分为 hash 方法和 history 方法，这里就采用了 hash 方法。 实现 index.html &amp;amp;lt;div class=&amp;quot;content&amp;quot;&amp;amp;gt; &amp;amp;lt;ul&amp;
怎么实现一个hash路由
最新发布
04-05
实现一个hash路由可以通过以下步骤： 1. 监听 `window` 对象的 `hashchange` 事件 ```js window.addEventListener('hashchange', function() { // 处理hash改变的逻辑 }) ``` 2. 获取当前的hash值 ```js var ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值