iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue使用router-view调用页面方式
  • 319
分享到

vue使用router-view调用页面方式

vue使用router-viewvuerouter-viewrouter-view调用页面 2023-03-10 11:03:34 319人浏览 安东尼
摘要

目录使用router-view调用页面1.get方式2.post方式实例总结使用router-view调用页面 在项目中,需要在其中一个页面,调用很多其他页面的表单,所以使用rout

使用router-view调用页面

项目中,需要在其中一个页面,调用很多其他页面的表单,所以使用router来实现页面的调用。

Vue-router有传递参数的两种方式,get和post。

1.get方式

页面跳转

this.$router.push({path:'/xxx',query:{id:1}});//类似get传参,通过URL传递参数

新页面接收参数

this.$route.query.id

2.post方式

页面跳转

 //由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用
 //否则params将无效。
 //需要用name来指定页面。
 this.$router.push({name:'page2',params:{id:1}});//类似post传参

新页面接收参数

this.$route.params.id

注意:在页面进行刷新的时候经常会遇到参数变了,但是新页面接受的参数没有变化。这种问题可以通过加watch解决。

watch: {
      '$route'(to, from){
        //在这里重新刷新一下
        this.getParams();
      }
    }

实例

首先,我们的页面是wfqlc.vue(我的申请),被调用的页面为pjzydgl.vue(票据准印单管理)。

1.在router的index.js文件里,给我的申请页面加children。

2.在需要跳转的地方添加router-view。

<!-- 附加单据 -->
    <Modal
        title="附加单据"
        v-model="fjdjModal"
        :mask-closable="false"
        :transfer="false"
        width="600"
        >
        <div style="height:300px;width:100%;overflow-y: auto;" class="modal-wrap">
          <router-view></router-view>
        </div>
    </Modal>

3.在我的申请wfqlc.vue页面,把请求发送出去。

// 附加单据
    getAdditionalDocument (row) {
      this.fjdjModal = true
      this.$router.push({
        // path: `/wfqlcfjdj/${row.WEBUnitUrl}`,
        path: `/wfqlcfjdj/pjzydgl`,
        query: {
          // businessIndex: row.businessId
          businessIndex: '6883a5c4-b706-424e-ba88-4acc83eded2f'
        }
      })
    },

4.请求会拼在地址栏发送过去

path传的参数跳转到了对应的页面,businessIndex获取到了对应的值。

5.跳转到票据准印单管理pjzydgl.vue页面。

mounted () {
    if (this.$route.query.businessIndex) {
      this.tzdetail(this.$route.query)
    }
  }

6.根据 businessIndex获取到对应的值。

methods {
  tzdetail (data) {
    this.detail(data.businessIndex, 'detail')
  },
  detail (row) {
    const url = `${window.zvconfig.url.pjsyDetail}?id=${row}`
    this.$axiOS.get(url).then(res => {
      if (res.data.status === '00000') {
        this.detailFORM = res.data.data
        this.childTableData = res.data.data.detailList
      } else {
        this.$Message.error(res.data.msg)
      }
    })
  },
// 关闭弹窗回到我的申请页面
  cancelModal () {
    if (this.$route.path.indexOf('/wfqlcfjdj/') > -1) {
      this.$router.push({
        path: '/wfqlc'
      })
    }
  },
}

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: vue使用router-view调用页面方式

本文链接: https://www.lsjlt.com/news/199257.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue使用router-view调用页面方式
    目录使用router-view调用页面1.get方式2.post方式实例总结使用router-view调用页面 在项目中,需要在其中一个页面,调用很多其他页面的表单,所以使用rout...
    99+
    2023-03-10
    vue使用router-view vue router-view router-view调用页面
  • vue怎么使用router-view调用页面
    这篇文章主要介绍“vue怎么使用router-view调用页面”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“vue怎么使用router-view调用页面”文章能帮助大家解决问题。使用router-v...
    99+
    2023-07-05
  • Vue的route-view子页面调用父页面的函数详解
    目录route-view子页面调用父页面函数router-view解释下面就一一来解释一下命令视图:通常用在同时显示多个视图route-view子页面调用父页面函数 最近写项目的时候...
    99+
    2022-11-13
  • vue中router-view组件的使用详解
    在开发vue项目中经常需要实现一个页面里面可以切换着展现不同的组件页面 例如:下图中通过点击侧边栏不同的组件路由到不同的组件页,而侧边栏和顶部部分是不变的,切换的只是组件页面。 这...
    99+
    2022-11-12
  • 小程序web-view怎么调用第三方页面
    小程序web-view调用第三方页面的案例:给web-view 标签的src属性绑定一个url地址即可。<web-view :webview-styles="webviewStyles" src...
    99+
    2022-10-05
  • 怎么使用vue-router实现单页面路由
    这篇“怎么使用vue-router实现单页面路由”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么使用vue-router实...
    99+
    2023-07-04
  • vue-router嵌套路由方式(页面路径跳转但页面显示空白)
    目录如图所示从欢迎页跳转至用户列表查询相关资料,有两种解决方案如图所示从欢迎页跳转至用户列表 欢迎页:路径---welcome 用户页:路径---users  可以看到...
    99+
    2022-11-13
  • vue中如何使用router-link实现跳转页面
    这篇文章主要介绍了vue中如何使用router-link实现跳转页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。router-link跳转...
    99+
    2022-10-19
  • Vue中如何在新窗口打开页面及使用Vue-router
    这篇文章将为大家详细讲解有关Vue中如何在新窗口打开页面及使用Vue-router,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。背景在开发提分加项目的过程中,遇到了点击下...
    99+
    2022-10-19
  • 怎么使用Vue和vue-router创建单页应用
    本文小编为大家详细介绍“怎么使用Vue和vue-router创建单页应用”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么使用Vue和vue-router创建单页应用”文章能帮助大家解决疑惑,下面跟着小编...
    99+
    2022-10-19
  • vue 使用vuex在页面跳转的实现方式
    目录vue 使用vuex在页面跳转第一种方式:使用 router 动态路由传参,将需要的数据带过去第二种方式:使用vuexvuex 页面跳转参数存储获取vue中我们用于页面跳转有三种...
    99+
    2022-11-12
  • 微信小程序页面中的view怎么调用js
    微信小程序页面中的view调用js的方法:通过引入wxs模块实现效果,新建`filter.wxs`文件,代码:var filters = {      ...
    99+
    2022-10-21
  • .html页面引入vue并使用公共组件方式
    目录.html页面引入vue并使用公共组件问题描述解决办法目录结构vue公共组件框架搭建步骤详述总结.html页面引入vue并使用公共组件 问题描述 整体项目采用传统 .html 文...
    99+
    2023-01-13
    .html页面 html页面引入vue 使用公共组件
  • vue3中keep-alive和vue-router的结合使用方式
    目录前言代码一、为何要使用keep-alive?二、vue2中使用keep-alive三、vue3中使用keep-alive四、keep-alive属性“include,...
    99+
    2022-11-13
    vue3中keep-alive vue3中vue-router keep-alive和vue-router使用
  • vue3使用vue-router及路由权限拦截方式
    目录使用vue-router及路由权限拦截vue3使用vue-router讲解使用vue-router及路由权限拦截 vue3 使用 vue-router 的方式和 vue2 基本一...
    99+
    2022-11-13
  • vue3+TypeScript+vue-router的使用方法
    目录简单使用创建项目vue-cli创建vite创建安装vue-router创建/修改组件修改入口ts启动vue在浏览器中访问文件结构图片综合使用动态参数使用watch监听动态参数使用...
    99+
    2022-11-12
  • php不同页面方法调用方法调用方法调用方法
    PHP是一种广泛使用的服务器端脚本语言,它支持多种不同的方法调用方式,使得程序开发者可以更加灵活地进行编程。本文将简要介绍PHP中不同页面方法调用的方法及其调用方式。一、函数的定义在PHP中定义函数可以使用以下的语法:function fu...
    99+
    2023-05-24
  • Vue使用三种方法刷新页面
    我们在写项目的时候,经常会遇到,用户执行完某个动作,改变了某些状态,需要重新刷新页面,以此来重新渲染页面。如:用户登录成功、增加、删除、更新等。 原始方法: loca...
    99+
    2022-11-12
  • web面试vue自定义组件及调用方式
    引入: 由于项目需求, 部分相同的代码我们会封装成组件, 在需要使用的地方导入, 并以标签的形式书写在中, 但是在"vant"组件库中, "Dialog 弹出框"组件有2中使用方式 ...
    99+
    2022-11-12
  • vue中如何使用vue-router切换页面时滚动条自动滚动到顶部
    小编给大家分享一下vue中如何使用vue-router切换页面时滚动条自动滚动到顶部,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作