vue ElementUI 路由跳转新页面

页面效果

从产品成本核算配置管理Tab页跳转核算配置信息Tab页

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

1. 路由跳转配置

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

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

解决方案：使用query传值

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

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

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

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