FIX 路由query传参各类问题

src/layout/components/tags.vue

@@ -67,7 +67,9 @@
 			}
 		},
 		created() {
-			this.addViewTags(this.$router.options.routes[0].children[0].children[0]);
+			const dashboardRoute = this.$router.options.routes[0].children[0].children[0]
+			dashboardRoute.fullPath = dashboardRoute.path
+			this.addViewTags(dashboardRoute);
 			this.addViewTags(this.$route);
 		},
 		mounted() {
@@ -92,7 +94,7 @@
 			},
 			//高亮tag
 			isActive(route) {
-				return route.path === this.$route.path
+				return route.fullPath === this.$route.fullPath
 			},
 			//关闭tag
 			closeSelectedTag(tag) {
@@ -114,7 +116,7 @@
 				this.contextMenuVisible = true;
 				this.left = e.clientX + 1;
 				this.top = e.clientY + 1;
-				
+
 				//FIX 右键菜单边缘化位置处理
 				this.$nextTick(() => {
 					let sp = document.getElementById("contextmenu");
@@ -134,9 +136,10 @@
 				var nowTag = this.contextMenuItem;
 				this.contextMenuVisible = false
 				//判断是否当前路由，否的话跳转
-				if(this.$route.path != nowTag.path){
+				if(this.$route.fullPath != nowTag.fullPath){
 					this.$router.push({
-						path: nowTag.path
+						path: nowTag.fullPath,
+						query: nowTag.query
 					})
 				}
 				this.$store.commit("refreshIframe", nowTag)
@@ -163,7 +166,7 @@
 				var nowTag = this.contextMenuItem;
 				var tags = [...this.tagList];
 				tags.forEach(tag => {
-					if(tag.meta&&tag.meta.affix || nowTag.path==tag.path){
+					if(tag.meta&&tag.meta.affix || nowTag.fullPath==tag.fullPath){
 						return true
 					}else{
 						this.closeSelectedTag(tag)
@@ -176,9 +179,10 @@
 				var nowTag = this.contextMenuItem;
 				this.contextMenuVisible = false
 				//判断是否当前路由，否的话跳转
-				if(this.$route.path != nowTag.path){
+				if(this.$route.fullPath != nowTag.fullPath){
 					this.$router.push({
-						path: nowTag.path
+						path: nowTag.fullPath,
+						query: nowTag.query
 					})
 				}
 				var element = document.getElementById('adminui-main')

src/store/modules/viewTags.js

@@ -4,7 +4,7 @@ export default {
 	},
 	mutations: {
 		pushViewTags(state, route){
-			let target = state.viewTags.find((item) => item.path === route.path)
+			let target = state.viewTags.find((item) => item.fullPath === route.fullPath)
 			let isName = route.name
 			if(!target && isName){
 				state.viewTags.push(route)
@@ -12,18 +12,26 @@ export default {
 		},
 		removeViewTags(state, route){
 			state.viewTags.forEach((item, index) => {
-				if (item.path === route.path){
+				if (item.fullPath === route.fullPath){
 					state.viewTags.splice(index, 1)
 				}
 			})
 		},
 		updateViewTags(state, route){
 			state.viewTags.forEach((item) => {
-				if (item.path == route.path){
+				if (item.fullPath == route.fullPath){
 					item = Object.assign(item, route)
 				}
 			})
 		},
+		updateViewTagsTitle(state, title='', fullPath){
+			const nowFullPath = fullPath || location.hash.substring(1)
+			state.viewTags.forEach((item) => {
+				if (item.fullPath == nowFullPath){
+					item.meta.title = title
+				}
+			})
+		},
 		clearViewTags(state){
 			state.viewTags = []
 		}

src/views/template/list/index.vue

@@ -209,7 +209,10 @@
 			},
 			table_edit(row){
 				this.$router.push({
-					path: `/template/list/save/${row.id}`
+					path: `/template/list/save`,
+					query: {
+						id: row.id
+					}
 				});
 			},
 			filterHandler(value, row, column){

src/views/template/list/save.vue

@@ -8,7 +8,7 @@
 -->
 
 <template>
-	<sc-page-header title="页面标题" description="可用于非常复杂的表单提交，如一些较为简单的表单提交应使用dialog或者drawer更合适" icon="el-icon-burger"></sc-page-header>
+	<sc-page-header :title="id?'ID:'+id:'页面标题'" description="可用于非常复杂的表单提交，如一些较为简单的表单提交应使用dialog或者drawer更合适" icon="el-icon-burger"></sc-page-header>
 	<el-main>
 		<el-alert title="因为keep-alive只接受组件name,导致多路由共用组件时,关闭或刷新一个标签导致其他同一组件的页面缓存失效,后续还在寻找完美的解决方案." type="error" style="margin-bottom: 15px;"></el-alert>
 		<el-card shadow="never">
@@ -48,7 +48,7 @@
 		name: 'list-save',
 		data() {
 			return {
-				id: this.$route.params.id,
+				id: this.$route.query.id,
 				form: {
 					name: "",
 					type: "1"
@@ -60,12 +60,9 @@
 		},
 		mounted() {
 			if(this.id){
-				this.$store.commit("updateViewTags", {
+				//更改tag标签
-					path: this.$route.path,
+				//updateViewTagsTitle 可携带第2个参数，要更改哪个fullPath的标题，不设置就是变更当前
-					meta: {
+				this.$store.commit("updateViewTagsTitle", `详情ID:${this.id}`)
-						title:"详情ID="+this.id
-					}
-				})
 			}
 		},
 		methods: {