整理一些关于网页跳转链接的方式

网页开发中的页面跳转方式
本文整理了网页开发中常用的页面跳转方式,包括<a>标签和JS两种实现方式,详细介绍了各方法的特点和使用场景。

在开发网页时经常会用到页面的跳转,所以在此整理一下个人常用的一些方式,方便以后查看。

 

一般来说,跳转会采用<a>标签和js两种实现方式,首先是<a>标签,href属性就不说了,重点列一下"target"属性,该属性控制<a>标签的跳转方式,默认是在当前窗口跳转,其他几种是:

_blank

浏览器总在一个新打开、未命名的窗口中载入目标文档。

_self

这个目标的值对所有没有指定目标的 <a> 标签是默认目标,它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的,除非和文档标题 <base> 标签中的 target 属性一起使用。

_parent

这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中,那么它与目标 _self 等效。

_top

这个目标使得文档载入包含这个超链接的窗口,用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

提示:这些 target 的所有 4 个值都以下划线开始。任何其他用一个下划线作为开头的窗口或者目标都会被浏览器忽略,因此,不要将下划线作为文档中定义的任何框架 name 或 id 的第一个字符

以上摘自W3C,没有测试过;另外一种常用的就是JS去控制链接的跳转:

最常见的是window.location.href="url",触发后会在当前窗口跳转到指定链接,并留下一条历史记录(历史记录会在某些应用场景非常管用,尤其是微信浏览器);

window.location.replace("url"),触发后同样也在当前窗口跳转到指定链接,不同的是它会覆盖掉原有的链接(即原链接不会存留历史记录);

window.history.go(num),使用该语句可以根据浏览器的历史记录进行跳转,num=0时表示当前页面,-1表示历史记录中的上一个页面,以此类推。(注:使用histoty.go返回上一页面时,不同浏览器会根据不同的方式读取缓存中的数据加载页面,若需要返回时刷新那个页面,需要加上<meta>标签控制缓存);

window.open("url"),触发后会在新的窗口打开链接。

 

附:控制页面的缓存标签

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

转载于:https://www.cnblogs.com/liaojh/p/5101341.html

<think>好的,用户想在自己的主页面添加超链接实现页面跳转,我需要根据提供的引用内容来解答。首先,我需要整理不同的方法,包括普通的HTML方法、Vue路由跳转,以及页面内锚点跳转。 用户提到的是主页面,所以可能需要多种方式的介绍。引用3和4提到了HTML的页面内跳转,使用锚点。比如用href="#id"和对应的div或h标签的id。这是基础的方法,应该先介绍这个。 然后,用户如果需要跳转到其他页面,可能需要普通的超链接,比如引用1中的例子,直接使用a标签的href指向目标页面。但引用1还提到了通过中间loading页面跳转,这可能是一个优化的方法,用户可能需要加载动画,可以建议他们如果需要加载动画的话,可以采用中间页的方式,但需要说明实现步骤,比如在begin页面链接到loading页,并带上目标URL参数,然后在loading页加载目标页面。 另外,用户如果使用Vue框架,引用2提到了在Vue中通过路由配置实现跳转。需要解释如何在router/index.ts中定义路由,然后在组件中使用router-link或编程式导航。比如点击事件中调用this.$router.push('/path'),或者使用router-link组件。 还需要注意用户是否想要页面内跳转还是跳转到不同页面。根据问题描述,用户可能两者都需要,所以分点说明不同场景下的实现方式。 另外,要确保回答结构清晰,分步骤说明每种方法,并给出代码示例。比如HTML的基础跳转、Vue路由跳转、页面内锚点,以及中间页加载动画的方法。最后可能还需要提醒用户注意路径的正确性和路由配置,避免404错误。 检查引用内容,确保每个方法都有对应的引用标记。例如,HTML超链接引用3和4,Vue跳转引用2,中间页引用1。这样用户可以根据引用来查看更详细的信息。 最后,生成相关问题,帮助用户进一步了解相关主题,比如性能优化、其他前端框架的实现方法等。</think>### 如何在主页面添加超链接实现页面跳转? #### 一、基础HTML超链接跳转 1. **跳转到外部页面** 使用`<a>`标签的`href`属性指向目标页面路径,例如: ```html <a href="/target-page.html">跳转到目标页面</a> ``` 若需要在新标签页打开,添加`target="_blank"`属性即可[^3]。 2. **页面内锚点跳转** 通过`href="#id"`指向页面内元素的`id`属性,例如: ```html <a href="#section1">跳转到Section 1</a> <!-- 目标位置 --> <div id="section1">这是Section 1的内容</div> ``` 此方法适用于长页面快速定位[^4]。 --- #### 二、Vue框架中的页面跳转 1. **配置路由** 在`router/index.ts`中定义目标页面的路由路径: ```typescript const routes = [ { path: '/home', component: HomePage }, { path: '/target', component: TargetPage } ]; ``` 2. **使用`<router-link>`组件** 在模板中直接使用Vue Router提供的组件: ```html <router-link to="/target">跳转到目标页</router-link> ``` 3. **编程式导航** 在事件中通过`this.$router.push()`实现跳转: ```javascript methods: { navigateToTarget() { this.$router.push('/target'); } } ``` 引用自Vue路由配置实践[^2]。 --- #### 三、添加加载动画的跳转(中间页方案) 1. **主页面链接设置** 将超链接指向中间加载页,并携带目标页参数: ```html <a href="/loading?url=/target-page">跳转(带加载动画)</a> ``` 2. **中间页逻辑实现** 在中间页(如`loading.vue`)中解析参数并加载目标页面: ```javascript mounted() { const targetUrl = this.$route.query.url; // 模拟加载延迟 setTimeout(() => { window.location.href = targetUrl; }, 2000); // 2秒后跳转 } ``` 此方法可避免页面切换时的空白等待[^1]。 --- #### 四、注意事项 1. **路径正确性** 确保`href`路径与路由配置或文件路径一致,避免404错误。 2. **锚点唯一性** 页面内跳转时,目标元素的`id`需全局唯一。 3. **框架兼容性** Vue/React等框架需优先使用其路由机制,而非原生`<a>`标签。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值