本文主要是介绍vue ElementUI 路由跳转新页面,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
页面效果
从产品成本核算配置管理Tab页跳转核算配置信息Tab页
路由跳转新页面,需要考虑到:
- 路由跳转配置
//在router配置跳转信息
{path: '/costcheckconf',component: Layout,redirect: '/costcheckconf/msg',children: [{path: 'msg',name: '核算配置信息',component: () =>import(/* webpackChunkName: "page" */ '@/views/workshop/costcheckconf/costcheckconf-form')}]},
- 路由跳转如何传递参数问题
解决方案:使用query传值
queryHandle (id) {//路由跳转页面并传递参数this.$router.push({path:'/costcheckconf/msg',query:{id:id}})}
- 打开多个Tab页面,页面变量加载不自动刷新的问题
问题原因 : vue官网详细解释说明使用同一路由携带不同参数,本质上是重用相同的组件实例,默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件,因此不会调用组件的生命周期挂钩。
使用的解决方案:监听路由的变化
watch: {'$route'(to, from){//接收参数this.route_Id = to.query.id;this.init(this.route_Id);}
}
这篇关于vue ElementUI 路由跳转新页面的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!