ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【前端】实现Vue组件页面跳转的多种方式 [打印本页]

---

作者: 火影    时间: 2024-8-31 19:53
标题: 【前端】实现Vue组件页面跳转的多种方式
前言

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

1. 内嵌

想要在Vue应用中内嵌一个外部网页，可以利用<iframe>标签
下面是一个示例：

1. <template>
2.   <div>
3.     <!-- 在这里嵌入外部网页 -->
4.     <iframe src="https://www.example.com" width="100%" height="500px" frameborder="0"></iframe>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   name: 'EmbeddedWebPage',
11. }
12. </script>
14. <style scoped>
15. /* 在这里添加样式 */
16. </style>

复制代码

<iframe>标签的src属性设置为要嵌入的外部网页的URL

• 可以调整width和height属性来设置iframe的大小
  
• frameborder属性用于设置是否显示边框，设置为"0"表示不显示边框
  

2. 跳转新页面

以下几个Demo方式都不大一样，可以细细品尝
别的如果链接无法跳转到外部链接，通常有以下几个缘故原由：

• 安全战略限定：欣赏器的安全战略可能阻止了在某些环境下跳转到外部链接，尤其是在一些网页中加载了外部脚本大概利用了一些特定的安全设置时
  
• Vue Router 拦截：如果 Vue 项目利用了 Vue Router，而且点击的链接是一个标准的超链接（<a> 标签），Vue Router 会尝试拦截这个跳转，并尝试在单页面应用中进行路由跳转
  为了制止这种环境，可以将链接设置为外部链接，并利用 target="_blank" 属性来在新窗口中打开链接，这样就不会被 Vue Router 拦截
  
• 路由模式设置：如果在 Vue Router 中利用了 history 模式，而且服务器端没有准确设置，可能会导致在欣赏器所在栏输入外部链接时出现404错误
  在这种环境下，必要确保服务器端已经准确设置了路由，以确保在直接访问外部链接时能够准确跳转
  
• 欣赏器插件或扩展：某些欣赏器插件或扩展可能会干扰页面的跳转行为
  可以尝试在差别的欣赏器大概在无插件的环境下测试链接是否正常跳转
  

检查这些问题可能会找到问题所在
2.1 Demo1

跳转到新的页面：

1. <template>
2.   <div>
3.     <!-- 使用 <a> 标签跳转到外部链接 -->
4.     <a href="http://example.com" target="_blank">跳转到外部链接</a>
5.   </div>
6. </template>
8. <script>
9. export default {
10.   name: 'RedirectPage',
11. }
12. </script>
14. <style scoped>
15. /* 在这里添加样式 */
16. </style>

复制代码

• <a> 标签的 href 属性指定了外部链接的所在，比如 http://example.com
  
• target="_blank" 属性告诉欣赏器在新的标签页大概窗口打开链接
  

这样当用户点击链接时，欣赏器会打开一个新的标签页大概窗口，并跳转到指定的外部链接
不外这种方式必要双击最后才能继续跳转，有些鸡肋，有没有一步到位呢，也是有的！！
2.2 Demo2

想要实现直接跳转到外部链接，而不必要用户点击链接的操作
可以在 Vue 组件的 mounted 生命周期钩子函数中利用 JavaScript 来实现跳转

1. <template>
2.   <div>
3.     <!-- 在页面加载时立即跳转到外部链接 -->
4.   </div>
5. </template>
7. <script>
8. export default {
9.   name: 'RedirectPage',
10.   mounted() {
11.     // 在组件挂载后立即跳转到外部链接
12.     window.location.href = "http://example.com";
13.   }
14. }
15. </script>
17. <style scoped>
18. /* 在这里添加样式 */
19. </style>

复制代码

当 Vue 组件被挂载到页面上后，mounted 生命周期钩子函数会被调用
在这个钩子函数中，利用 window.location.href 将页面立即跳转到指定的外部链接，比如 http://example.com。
这样，当用户访问这个 Vue 组件所在的页面时，页面会立即跳转到指定的外部链接，而不必要用户进行任何点击操作
2.3 Demo3

如果盼望用户返回上一个链接时停止跳转，可以利用 JavaScript 的 history 对象来管理欣赏器的历史记载，并在组件销毁时扫除添加的跳转

1. <template>
2.   <div>
3.     <!-- 页面内容 -->
4.   </div>
5. </template>
7. <script>
8. export default {
9.   name: 'RedirectPage',
10.   mounted() {
11.     // 在组件挂载后立即跳转到外部链接
12.     this.redirectToExternalPage();
13.   },
14.   methods: {
15.     redirectToExternalPage() {
16.       // 跳转到外部链接
17.       this.redirectHandler = setTimeout(() => {
18.         window.location.href = "http://example.com";
19.       }, 1000); // 1秒后跳转，可根据需求调整
20.     }
21.   },
22.   beforeDestroy() {
23.     // 组件销毁时清除跳转操作
24.     if (this.redirectHandler) {
25.       clearTimeout(this.redirectHandler);
26.     }
27.   }
28. }
29. </script>
31. <style scoped>
32. /* 在这里添加样式 */
33. </style>

复制代码

利用了 setTimeout 函数来延迟跳转到外部链接，以便用户偶然间返回上一个链接
可以根据必要调整延迟时间，特殊是在组件销毁时，利用 beforeDestroy 生命周期钩子函数来扫除跳转操作，以防止在用户返回上一个链接时继续跳转
3. 拓展

页面不跳转，甚至出现如下报错：app.js:978 Error: Cannot find module './views/equipment/inner/tech-data/index.vue'
可能是因为文件路径设置不准确大概文件确实不存在导致的
可以按照以下步骤检查和办理问题：

• 确认文件路径： 确保在你的项目目录中存在./views/equipment/inner/tech-data/index.vue文件。可以手动在文件体系中查找确认。
  
• 检查文件名和路径： 确保在路由设置中利用的文件路径与现实文件路径划一。即确保在PageRouter或ViewsRouter中的路由设置中，component属性的值指向了准确的文件路径。
  
• 检查文件导入： 如果文件确实存在，那么可能是文件导入的问题
  在确保文件路径准确的条件下，检查在PageRouter或ViewsRouter中导入组件的语句是否准确。确保导入路径和现实文件路径划一。
  
• 文件名大小写： 确保文件名的大小写与现实文件名匹配。在某些操作体系中，文件名的大小写是敏感的，因此确保在路由设置中利用的文件名与现实文件名大小写划一。
  
• 重新安装依靠： 如果以上步骤都没能办理问题，尝试重新安装项目的依靠
  可以通过删除node_modules文件夹并重新运行npm install来实现
  
• 检查编译过程： 如果利用了构建工具如Webpack等，确保构建过程中能够准确地剖析和打包Vue组件
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4