vue ElementUI 路由跳转新页面

淡淡的烟草味﹌ 2022-12-15 03:44 501阅读 0赞

## 页面效果 ##

从产品成本核算配置管理Tab页跳转核算配置信息Tab页  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]

## 路由跳转新页面，需要考虑到： ##

1.  路由跳转配置

//在router配置跳转信息
    { 
        path: '/costcheckconf',
        component: Layout,
        redirect: '/costcheckconf/msg',
        children: [{ 
          path: 'msg',
          name: '核算配置信息',
          component: () =>
            import(/* webpackChunkName: "page" */ '@/views/workshop/costcheckconf/costcheckconf-form')
        }]
      },

1.  路由跳转如何传递参数问题

> 解决方案：使用query传值

queryHandle (id) { 
    	   //路由跳转页面并传递参数
    	   this.$router.push({ 
    	     path:'/costcheckconf/msg',
    	     query:{ 
    	       id:id
    	     }
    	   })
    	 }

1.  打开多个Tab页面，页面变量加载不自动刷新的问题

> 问题原因 ： vue官网详细解释说明使用同一路由携带不同参数，本质上是重用相同的组件实例，默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件，因此不会调用组件的生命周期挂钩。  
> 使用的解决方案：监听路由的变化

watch: { 
    	'$route'(to, from){ 
    	  //接收参数
    	  this.route_Id = to.query.id;
    	  this.init(this.route_Id);
    	}
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2thX3hpbmds_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/2a13150d5f6c44ebb03c60db1c743ebd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，501人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 66 阅读

相关【Vue基础】Vue路由，实现页面跳转

一、需求说明点击不同的模块实现页面跳转，如下点击“员工管理”右侧会显示员工管理页面，如下图1；点击“入住信息”右侧会显示入住信息，如下图二 ![7cf2eb2df4a64

偏执的太偏执、/ 2023年10月11日 22:04/ 0 赞/ 92 阅读

相关 1.Vue之路由页面跳转

demo地址:链接：https://pan.baidu.com/s/1eWmQElwK0AYskR6O5Ith-A 提取码：zsq6 1.功能,根据点击实现页面底

淡淡的烟草味﹌/ 2023年03月01日 13:27/ 0 赞/ 33 阅读

相关 vue ElementUI 路由跳转新页面

页面效果从产品成本核算配置管理Tab页跳转核算配置信息Tab页 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_sh

淡淡的烟草味﹌/ 2022年12月15日 03:44/ 0 赞/ 502 阅读

相关 Vue 新窗口路由跳转

使用 resolve 进行新窗口跳转 // 只需在 router 文件夹下面的 index 填写路由地址不需要再使用的地方注册该组件 Print {

蔚落/ 2022年11月20日 08:10/ 0 赞/ 293 阅读

相关 vue 路由页面改变路由跳转页面参数或者叫公共页面

我不想知道原理，能实现就行日常中有很多页面公用一个头部，用来切换，我习惯于用父子路由的方式写，像这样 ![在这里插入图片描述][watermark_type_Z

古城微笑少年丶/ 2022年09月10日 01:16/ 0 赞/ 242 阅读

相关 Vue路由跳转页面后-新页面没有位于顶部-案例

> 页面通过路由调转后，新页面停留的位置与上一级页面一致解决 > 配置路由 const router = new VueRouter({ s

今天药忘吃喽~/ 2022年09月07日 12:20/ 0 赞/ 225 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 550 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 520 阅读

相关 vue - 路由跳转新页面后回到顶部

前言 vue路由跳转新页面，如果有滚动条的话，会保持和原来位置回到顶部解决方法 1、全局设置路由跳转回到顶部，router.js中 route

绝地灬酷狼/ 2021年07月26日 18:22/ 1 赞/ 1044 阅读