component is 内置组件切换方法一：
component组件（单独拿出一个组件来专门进行切换使用）
使用is来绑定你的组件：如下面的reviewedPlan planDetailsList attachmentList等引入的组件名
changeViewFun 是用来切换组件的方法 通过给is绑定的currentView来实现切换组件
pathUrl就是当前的路由
<template> <div class="reviewed"> <component :is="currentView" @changeview="changeViewFun" :pathUrl="pathUrl" ></component> </div> </template> <script> //引入三个需要切换的组件 import reviewedPlan from '../modules/reviewedPlan.vue'; import planDetailsList from './planDetailsList'; import attachmentList from './attachmentList.vue'; export default { name: "reviewed", data() { return { currentView:'reviewedPlan', pathUrl:'', hrefIndex:"", } }, components: { reviewedPlan, planDetailsList, attachmentList }, created () { this.hrefIndex=window.location.href.indexOf('jxjh')-1; this.pathUrl=window.location.href.substring(this.hrefIndex); if(this.$route.query.currentView){ this.$route.query.currentView = this.$route.query.currentView===this.currentView?this.$route.query.currentView:this.currentView; } }, methods:{ //组件切换方法 changeViewFun(val){ this.currentView = val; } }, } </script> <style lang="less" scoped> @import "~@/libs/less/theme/theme.less"; </style>每个切换的组件
this.$emit("changeview","planDetailsList"); //父组件监听到changeview，给is绑定的currentView重新赋值 this.$router.push({ path: this.pathUrl, //通过props接收 props:{pathUrl:String} query: { id: params.row.id, //参数名 from:"reviewedPlan" //这里加from原因是要区分多个组件的情况下通过路由from参数来区分是通过那个组件切换过来的 } })返回组件内部方法 (点击返回的时候执行的操作)
var url = this.$route.query.from; //取路由from，区分是那个通过那个组件传递过来的，返回的时候可返回到对应的组件 this.$emit("changeview",url); this.$router.push({ path: this.pathUrl, query: { currentView:url, } })component is 内置组件切换方法二：
实现的结果是：组件A调转组件B，组件A里面有个查看按钮，点击查看，跳转到组件B，组件B里面点击返回跳转到组件A，使用component，从组件A跳到组件B，在组件B里面刷新之后还是停留在组件B，还有就是点击tab切换的时候也可以，点击那个tab，当前tab发请求。具体实现：
1、封装routePlugin.js插件
const addQuery=function(queryDate){ var query={}; Object.assign(query,this.$route.query,queryDate); this.$router.push({ path:this.$route.path, query:query }); }; const delQuery=function(){ var query={}; var arg=Array.prototype.slice.call(arguments); Object.assign(query,this.$route.query); arg.forEach(item=>{ delete query[item];//删除参数 }) this.$router.push({ path:this.$route.path, query:query }); }; var install = { install(Vue) { Vue.mixin({ beforeCreate() { var self=this; this.$routePlugin={ addQuery:addQuery.bind(self), delQuery:delQuery.bind(self) } } }) } } export default install;2、在main.js中注册到全局，
import routePlugin from "./libs/js/vueExtend/routePlugin.js";
Vue.use(routePlugin); //修改参数方法
3、在组件内部使用
说明：需要三个组件：第一个：component主控制组件、第二个：初始化组件内容、第三个：跳转过去的组件
第一个：studentIndex.vue
<template> <component :is="viewName" @updateView="updateView" > </component> </template> <script> import studentGrowthPortfolio from './studentGrowthPortfolio.vue'; //学生 index import fileDetails from './fileDetails.vue'; //成长档案 详情 export default { data(){ return{ viewName:"studentGrowthPortfolio", } }, components:{ studentGrowthPortfolio, fileDetails }, mounted(){ this.viewName=this.$route.query.viewName?this.$route.query.viewName:this.viewName; }, created () { }, methods:{ /** * 接收子组件数据 * @param data {Object} * @return {Void} 无 */ updateView(name){ this.viewName = name if(!name){ this.$routePlugin.delQuery('viewName'); }else{ this.$routePlugin.addQuery({viewName:name}); } }, }, } </script> <style scoped lang="less"> @import "~@/libs/less/theme/theme.less"; </style>4、第二个：studentGrowthPortfolio.vue，点击查看需要执行的代码
click: () => { this.$emit("updateView","fileDetails"); this.$routePlugin.addQuery({ viewName:'fileDetails', identity:'student' }) }5、第三个：fileDetails.vue，点击返回时需要执行的代码
click:()=>{ this.$emit('updateView', 'studentGrowthPortfolio') }fileDetails.vue添加beforeDestoy，当离开当前组件时，销毁路由上的identity,和viewName参数
beforeDestroy(){
this.$routePlugin.delQuery('identity','viewName')
},
一切都ok了