热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

vue跳转方式(打开新页面)及传参操作示例

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,结合实例形式分析了vue.js跳转实现方式与参数接受相关操作技巧,需要的朋友可以参考下

本文实例讲述了vue跳转方式(打开新页面)及传参操作。分享给大家供大家参考,具体如下:

1. router-link跳转

// 直接写上跳转的地址

  link跳转

// 添加参数


// 参数获取
id = this.$route.query.id
// 新窗口打开



2. this.$router.push跳转

toDeail (e) {
  this.$router.push({path: "/detail", query: {id: e}})
}
// 参数获取
id = this.$route.query.id
toDeail (e) {
  this.$router.push({name: "/detail", params: {id: e}})
}
// 注意地址需写在 name后面
//参数获取,params和query区别,query参数在地址栏显示,params的参数不在地址栏显示
id = this.$route.params.id

3. this.$router.replace跳转

//和push的区别,push有记录一个history,replace没有
toDeail (e) {
  this.$router.replace({name: '/detail', params: {id: e}})
}

4. resolve跳转

//resolve页面跳转可用新页面打开
//2.1.0版本后,使用路由对象的resolve方法解析路由,可以得到location、router、href等目标路由的信息。得到href就可以使用window.open开新窗口了(这边应用:https://segmentfault.com/q/1010000009557100下的一个回答)
toDeail (e) {
  const new = this.$router.resolve({name: '/detail', params: {id: e}})
  window.open(new.href,'_blank')
}

接收方怎么接收参数 this.$route.query.seridthis.$route.params.setid,以下举一个接收的例子

注意接收参数时是 $route 不是 $router



接收的参数:





希望本文所述对大家vue.js程序设计有所帮助。


推荐阅读
  • 基于Node.js、EJSExcel、Express与Vue.js构建Excel转JSON工具:首阶段——Vue.js项目初始化及开发环境配置
    在近期的一个H5游戏开发项目中,需要将Excel数据转换为JSON格式。经过调研,市面上缺乏合适的工具满足需求。因此,决定利用Node.js、EJSExcel、Express和Vue.js自行构建这一工具。本文主要介绍项目的第一阶段,即Vue.js项目的初始化及开发环境的配置过程,详细阐述了如何搭建高效的前端开发环境,确保后续功能开发的顺利进行。 ... [详细]
  • 本文深入探讨了 Vue.js 中异步组件的应用与优化策略。首先,文章介绍了异步组件的基本概念及其在现代前端开发中的重要性。为了确保最佳实践,建议使用 Webpack 作为模块打包工具,因为 Browserify 默认不支持异步组件的加载。接着,详细解释了异步组件的使用方法,并提供了官方文档的相关链接以供参考。此外,文章还讨论了多种优化技巧,包括代码分割、懒加载和性能调优,以提升应用的整体性能和用户体验。 ... [详细]
  • 为了帮助 Vue.js 开发者提高开发效率,本文介绍了几种高效的安装与调试工具。首先,需要下载相关工具的压缩包,然后在谷歌浏览器中访问 `chrome://extensions` 页面,启用开发者模式,点击“加载已解压的扩展程序”按钮,并选择之前解压的文件夹。此外,我们还推荐使用一些流行的 Vue.js 调试插件,如 Vue Devtools,以进一步提升开发体验。 ... [详细]
  • Vue.js 2.0 生命周期详解与应用实例分析
    一、声明周期图例   图片来源:https:www.jianshu.compd61f55da98fb?fromtimeline   二、分析1、newVue()创建vue实例,其实 ... [详细]
  • 开源组件是什么意思_iView 发布微信小程序 UI 组件库 iView Weapp
    末尾有彩蛋。过去的两年里,iView开源项目已经帮助成千上万的开发者快速完成网站开发,大幅度提高了开发效率,成为Vue.js生态里重要的一 ... [详细]
  • 搜索引擎架构设计
    本文详细介绍了搜索引擎的主要组成部分,包括爬虫模块、索引模块和搜索模块。其中,索引模块采用了高效的二元分词技术进行数据存储,而搜索模块则基于ASP.NET框架实现了一个用户友好的界面和高效的搜索算法。 ... [详细]
  • 在最近的学习过程中,我对Vue.js中的Prop属性有了更深入的理解,并认为这一知识点至关重要,因此在此记录一些心得体会。Prop属性用于在组件之间传递数据。由于每个组件实例的作用域都是独立的,无法直接引用父组件的数据。通过使用Prop,可以将数据从父组件安全地传递到子组件,确保数据的隔离性和可维护性。 ... [详细]
  • 本文详细介绍了在 Vue.js 前端框架中集成 vue-i18n 插件以实现多语言支持的方法。通过具体的配置步骤和示例代码,帮助开发者快速掌握如何在项目中实现国际化功能,提升用户体验。同时,文章还探讨了常见的多语言切换问题及解决方案,为开发人员提供了实用的参考。 ... [详细]
  • 基于Java的微信小程序:Spring Boot驱动的中小学家校互动与电子作业管理平台
    基于Java的微信小程序,采用Spring Boot作为后端框架,构建了一个高效的中小学家校互动与电子作业管理平台。前端使用了uni-app框架,确保跨平台兼容性。该平台集成了家校沟通、作业发布与管理、学生成绩查询等功能,旨在提升教育管理效率和家长参与度。后端开发环境配置完善,采用Spring Boot、MyBatis等技术栈,确保系统的稳定性和扩展性。 ... [详细]
  • 深入解析 Vue 中的 Axios 请求库
    本文深入探讨了 Vue 中的 Axios 请求库,详细解析了其核心功能与使用方法。Axios 是一个基于 Promise 的 HTTP 客户端,支持浏览器和 Node.js 环境。文章首先介绍了 Axios 的基本概念,随后通过具体示例展示了如何在 Vue 项目中集成和使用 Axios 进行数据请求。无论你是初学者还是有经验的开发者,本文都能为你解决 Vue.js 相关问题提供有价值的参考。 ... [详细]
  • 深入解析 Vue 中通过 $route.params 实现参数传递的方法与技巧
    本文深入探讨了在 Vue 框架中利用 `$route.params` 进行参数传递的方法和技巧。通过详细解析 `$route.params` 的工作机制及其与 `$route.query` 的区别,帮助开发者更好地理解和应用这一功能。文章不仅涵盖了基本的使用方法,还提供了实际案例和最佳实践,以便读者能够灵活运用这些技术,提升开发效率和代码质量。 ... [详细]
  • 深入解析 Vue.js 的设计与实现:第三章详解
    在《深入解析 Vue.js 的设计与实现》第三章中,详细探讨了 Vue.js 渲染器与虚拟 DOM 的机制。通过 JavaScript 对象来模拟实际的 DOM 结构,例如,`const vNode = { tag: 'div', props: { ... } }`,这种方式不仅提高了性能,还增强了组件的可维护性和灵活性。本章进一步分析了虚拟 DOM 的创建、更新及优化策略,为开发者提供了深入了解 Vue.js 内核工作的视角。 ... [详细]
  • [Vue.js 3.0] Migration – vif vs. vfor Precedence ... [详细]
  • ### 一、指令概述指令是 Vue 中的一种特殊属性,用于增强 HTML 元素的功能。它们以 `v-` 开头,如 `v-cloak`。### 二、`v-cloak` 指令的应用`v-cloak` 指令主要用于解决页面加载过程中未编译的 Vue 插值表达式短暂显示的问题。在 Vue 实例编译完成之前,带有 `v-cloak` 的元素将被隐藏,从而避免了“闪动”现象。通过结合 CSS 样式,可以进一步优化用户体验,确保页面在初始加载时保持整洁和专业。 ... [详细]
  • 2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度?( ... [详细]
author-avatar
mobiledu2502938737
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有