【前端】实现Vue组件页面跳转的多种方式_开发测试

【前端】实现Vue组件页面跳转的多种方式

创始人

2024-12-28 03:06:16

0次

前言

通过某个Button让页面多种方式跳转

在这里插入图片描述

1. 内嵌

想要在Vue应用中内嵌一个外部网页，可以使用</code>标签</p><p>下面是一个示例：</p> <pre><code class="prism language-html"><template> <div>  <iframe src="https://www.example.com" width="100%" height="500px" frameborder="0">

</code>标签的src属性设置为要嵌入的外部网页的URL</p><ul><li><p>可以调整<code>width</code>和<code>height</code>属性来设置<code>iframe</code>的大小</p></li><li><p><code>frameborder</code>属性用于设置是否显示边框，设置为"0"表示不显示边框</p></li></ul><h2>2. 跳转新页面</h2><p>以下几个Demo方式都不大一样，可以细细品尝</p><p><strong>另外如果链接无法跳转到外部链接，通常有以下几个原因：</strong></p><ul><li><p><strong>安全策略限制</strong>：浏览器的安全策略可能阻止了在某些情况下跳转到外部链接，尤其是在一些网页中加载了外部脚本或者使用了一些特定的安全设置时</p></li><li><p><strong>Vue Router 拦截</strong>：如果 Vue 项目使用了 Vue Router，并且点击的链接是一个标准的超链接（<code><a></code> 标签），Vue Router 会尝试拦截这个跳转，并尝试在单页面应用中进行路由跳转<br /> 为了避免这种情况，可以将链接设置为外部链接，并使用 <code>target="_blank"</code> 属性来在新窗口中打开链接，这样就不会被 Vue Router 拦截</p></li><li><p><strong>路由模式设置</strong>：如果在 Vue Router 中使用了 history 模式，并且服务器端没有正确配置，可能会导致在浏览器地址栏输入外部链接时出现404错误<br /> 在这种情况下，需要确保服务器端已经正确配置了路由，以确保在直接访问外部链接时能够正确跳转</p></li><li><p><strong>浏览器插件或扩展</strong>：某些浏览器插件或扩展可能会干扰页面的跳转行为<br /> 可以尝试在不同的浏览器或者在无插件的情况下测试链接是否正常跳转</p></li></ul><p>检查这些问题可能会找到问题所在</p><h3>2.1 Demo1</h3><p>跳转到新的页面：</p> <pre><code class="prism language-html"><template> <div>  <a href="http://example.com" target="_blank">跳转到外部链接</a> </div> </template> <script> export default { name: 'RedirectPage', } </script> <style scoped> /* 在这里添加样式 */ </style> </code></pre> <ul><li><p><code><a></code> 标签的 href 属性指定了外部链接的地址，比如 <code>http://example.com</code></p></li><li><p><code>target="_blank"</code> 属性告诉浏览器在新的标签页或者窗口打开链接</p></li></ul><p>这样当用户点击链接时，浏览器会打开一个新的标签页或者窗口，并跳转到指定的外部链接</p><p><mark>不过这种方式需要双击最后才能继续跳转，有些鸡肋，有没有一步到位呢，也是有的！！</mark></p><h3>2.2 Demo2</h3><p>想要实现直接跳转到外部链接，而不需要用户点击链接的操作</p><p>可以在 Vue 组件的 <code>mounted</code> 生命周期钩子函数中使用 JavaScript 来实现跳转</p> <pre><code class="prism language-html"><template> <div>  </div> </template> <script> export default { name: 'RedirectPage', mounted() { // 在组件挂载后立即跳转到外部链接 window.location.href = "http://example.com"; } } </script> <style scoped> /* 在这里添加样式 */ </style> </code></pre> <p>当 Vue 组件被挂载到页面上后，<code>mounted</code> 生命周期钩子函数会被调用</p><p>在这个钩子函数中，使用 <code>window.location.href</code> 将页面立即跳转到指定的外部链接，比如 http://example.com。</p><p>这样，当用户访问这个 Vue 组件所在的页面时，页面会立即跳转到指定的外部链接，而不需要用户进行任何点击操作</p><h3>2.3 Demo3</h3><p>如果希望用户返回上一个链接时停止跳转，可以使用 JavaScript 的 history 对象来管理浏览器的历史记录，并在组件销毁时清除添加的跳转</p> <pre><code class="prism language-html"><template> <div>  </div> </template> <script> export default { name: 'RedirectPage', mounted() { // 在组件挂载后立即跳转到外部链接 this.redirectToExternalPage(); }, methods: { redirectToExternalPage() { // 跳转到外部链接 this.redirectHandler = setTimeout(() => { window.location.href = "http://example.com"; }, 1000); // 1秒后跳转，可根据需求调整 } }, beforeDestroy() { // 组件销毁时清除跳转操作 if (this.redirectHandler) { clearTimeout(this.redirectHandler); } } } </script> <style scoped> /* 在这里添加样式 */ </style> </code></pre> <p>使用了 <code>setTimeout</code> 函数来延迟跳转到外部链接，以便用户有时间返回上一个链接</p><p>可以根据需要调整延迟时间，特别是在组件销毁时，使用 <code>beforeDestroy</code> 生命周期钩子函数来清除跳转操作，以防止在用户返回上一个链接时继续跳转</p><h2>3. 拓展</h2><p>页面不跳转，甚至出现如下报错：<code>app.js:978 Error: Cannot find module './views/equipment/inner/tech-data/index.vue'</code></p><p>可能是因为文件路径配置不正确或者文件确实不存在导致的</p><p><strong>可以按照以下步骤检查和解决问题：</strong></p><ol><li><p><strong>确认文件路径</strong>： 确保在你的项目目录中存在.<code>/views/equipment/inner/tech-data/index.vue</code>文件。可以手动在文件系统中查找确认。</p></li><li><p><strong>检查文件名和路径</strong>： 确保在路由配置中使用的文件路径与实际文件路径一致。即确保在PageRouter或ViewsRouter中的路由配置中，component属性的值指向了正确的文件路径。</p></li><li><p><strong>检查文件导入</strong>： 如果文件确实存在，那么可能是文件导入的问题<br /> 在确保文件路径正确的前提下，检查在PageRouter或ViewsRouter中导入组件的语句是否正确。确保导入路径和实际文件路径一致。</p></li><li><p><strong>文件名大小写</strong>： 确保文件名的大小写与实际文件名匹配。在某些操作系统中，文件名的大小写是敏感的，因此确保在路由配置中使用的文件名与实际文件名大小写一致。</p></li><li><p><strong>重新安装依赖</strong>： 如果以上步骤都没能解决问题，尝试重新安装项目的依赖<br /> 可以通过删除node_modules文件夹并重新运行npm install来实现</p></li><li><p><strong>检查编译过程</strong>： 如果使用了构建工具如Webpack等，确保构建过程中能够正确地解析和打包Vue组件</p></li></ol><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-f23dff6052.css" rel="stylesheet"><link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-c216769e99.css" rel="stylesheet">  </div>  <div class="mt-5">  </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/kaifa/616787.html">iOS 经典全部面试题（上），2024前端高级面试题总结</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/kaifa/616789.html">Linux安装Weblogic 14.1.1.0.0保姆级教程</a> </p> </div>  <div class="d-flex flex-stack mb-2 mt-10">  <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3>  </div> <div class="separator separator-dashed mb-9"></div>  <div class="row g-10"> </div> </div>  </div>   <div class="col-xl-4 mt-0">  <div class="card card-flush h-md-100">  <div class="card-header pt-5 ">  <h3 class="card-title align-items-start flex-column">  <div class="d-flex align-items-center mb-2">  <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span>  </div>  </h3>  </div>   <div class="card-body pt-3">  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/kaifa/618693.html" class="text-dark fw-bold text-hover-primary fs-6">Http短轮询、WebSock...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">文章目录概要HttpWebSocketSSE小结概要本篇文章着重讲述了Http、WebSocket与...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202412/db4bb33ce7ebabf.png')"></div> </div>   <div class="m-0"> <a href="/kaifa/618692.html" class="text-dark fw-bold text-hover-primary fs-6">通过 ACM 论文模版学习 L...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">文章目录一、LaTeX 简介二、ACM 论文模版2.1 模板内容2.2 下载地址2.3 模板格式2....</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/kaifa/618690.html" class="text-dark fw-bold text-hover-primary fs-6">什么是dB？dBm、dBc、d...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">什么是dB？dBm、dBc、dBi、dBd怎么计算，有什么区别&#xff...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/kaifa/618688.html" class="text-dark fw-bold text-hover-primary fs-6">数据库面试看这个必看</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">文章目录数据库面试总结SQL汇总SQL `SELECT` 语句的执行顺序SQL跨表连...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202412/bdb2ec13d46afde.jpg')"></div> </div>   <div class="m-0"> <a href="/kaifa/618691.html" class="text-dark fw-bold text-hover-primary fs-6">七分钟了解!wepOKER外挂...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">自定义新版wepOKER系统规律，只需要输入自己想要的开挂功能，一键便可以生成出wepOKER专用辅...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/kaifa/618686.html" class="text-dark fw-bold text-hover-primary fs-6">【手写数据库toadb】01 ...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">开发环境专栏内容：手写数据库toadb 本专栏主要介绍如何从零开发，开发的步骤，以及开发过程中的涉...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('/static/assets/images/nopic.gif')"></div> </div>   <div class="m-0"> <a href="/kaifa/618682.html" class="text-dark fw-bold text-hover-primary fs-6">详细前端新手小白的Vue3入坑...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">Vue.js 是一个渐进式 JavaScript 框架，非常适合构建用户界面。Vue ...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202412/94546d3b7a553bf.png')"></div> </div>   <div class="m-0"> <a href="/kaifa/618685.html" class="text-dark fw-bold text-hover-primary fs-6">由于一个完整的购物商城代码非常...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">前端 (HTML/CSS/JavaScript)wxyrsy.com 前端主要负责用户界面的展示和交...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202408/2adee3fa357be45.jpg')"></div> </div>   <div class="m-0"> <a href="/kaifa/618684.html" class="text-dark fw-bold text-hover-primary fs-6">第6了解!德州poker外挂辅...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">第6了解!德州poker外挂辅助器插件,微扑克ai代打(有挂教程)-哔哩哔哩;第6了解!德州poke...</span> </div>  </div>  <div class="d-flex flex-stack mb-7">  <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://img2.pic99.top/ypkjmy/202412/9a18f5c250e9f9a.png')"></div> </div>   <div class="m-0"> <a href="/kaifa/618681.html" class="text-dark fw-bold text-hover-primary fs-6">验证码案例 —— Kaptch...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">🧸欢迎来到dream_ready的博客，📜相信你对这篇...</span> </div>  </div> </div>  </div>  </div>  </div> </div>  </div>  </div>   <div id="kt_app_footer" class="app-footer">  <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3">  <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2024 ©</span> 一品科技<a href="http://www.weishitang.cn/">唯识网</a><a href="http://news.weishitang.cn/">唯识资讯</a><a href="http://www.mj938.cn/">民间生活网</a><a href="http://code.shayuweb.com/">鲨鱼编程</a> </div>   <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/news/" target="_blank" class="menu-link px-2">科技资讯</a> </li> <li class="menu-item"> <a href="/kaifa/" target="_blank" class="menu-link px-2">开发测试</a> </li> <li class="menu-item"> <a href="/jishu/" target="_blank" class="menu-link px-2">技术分享</a> </li> </ul>  </div>  </div>  </div>  </div>  </div>  </div>  <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true">  <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span>  </div>  <script>var hostUrl = "/static/default/pc/";</script>  <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script>   </body>  </html>