浏览器路径 隐藏

 

浏览器地址栏有时会 不想让看到当前文件的名称,所以一般会在页面中转一下

以下是简单示例(只是想到简单实现,可能还会有更好的方法)

index.html

<body>
	<script type="text/javascript">
		window.location="login.html";
	</script>
</body>

login.html

<frameset rows="*,1px" framespacing="0" border="no" style="width:100%; height:100%; margin-top:0px; overflow:auto;">
	<frame id="test" src="#" noresize frameborder="0" />
</frameset>
<body>
</body>
<script type="text/javascript">
	$(document).ready(function() {
	    window.parent.document.getElementById("test").src='content.html' ;
	});
</script>

content.html 为具体的 页面内容

用浏览器打开index页面,浏览器显示内容为 content.html 内容,地址栏路径为:http://127.0.0.1:8020/login.html

亲测!

无聊时的想法,写出来测试的,具体功能的实用性未知 = =

### Vue2 中隐藏浏览器地址栏路径的方法 在 Vue2 项目中,可以通过配置路由模式来影响浏览器地址栏的表现形式。具体来说,有两种主要的路由模式可以选择:Hash 模式和 History 模式。 #### Hash 模式 (默认) 当使用 `hash` 模式的路由时,在 URL 后会有一个井号 (`#`) 来分隔实际的网页位置与应用内部的状态[^2]。这种方式不会向服务器发送请求,并且可以有效地防止路径暴露给用户查看。对于希望完全隐藏路径的情况而言,这可能是一个折衷方案,因为虽然路径隐藏了,但是仍然可以看到带有 `#` 的部分。 ```javascript import Vue from 'vue'; import Router from 'vue-router'; Vue.use(Router); export default new Router({ mode: 'hash', // 使用 hash 模式 }); ``` #### Memory 模式 需要注意的是,在标准的 Vue Router 实现里并没有直接提供所谓的 “memory history”,即完全不改变浏览器历史记录也不更新地址栏的方式。不过可以在某些特殊场景下考虑自定义实现逻辑以达到近似效果,但这通常不是推荐的做法,因为它违背了 Web 应用的一般行为准则。 如果确实有需求让整个应用程序运行期间保持固定的URL而没有任何变化,则建议探索其他替代方案,比如单页内的局部导航或是通过前端框架之外的技术手段处理。 为了更贴近于“隐藏”的概念,实际上更多的是控制如何呈现以及何时更改这些信息而不是真正意义上的隐藏它们。因此,选择合适的路由模式是解决问题的关键所在。 #### 处理中文参数编码 另外值得注意的是,即使选择了适合的路由模式之后,有时还需要额外注意对传递的数据做适当处理,特别是涉及到非 ASCII 字符串的时候。例如,当需要将含有汉字的内容作为查询字符串的一部分传入时,应该先对其进行编码再附加到链接上,从而避免乱码等问题的发生[^3]: ```javascript toTask(value) { const encodedDesc = encodeURIComponent(value.desc); router.push({ path: '/detail/' + value.id, query: { desc: encodedDesc } }); } ``` 综上所述,在 Vue2 中想要做到一定程度上的“隐藏地址栏路径主要是依靠合理选用路由模式来进行调整;而对于特定情况下(如包含中文字符),则需配合相应的编码措施加以辅助。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值