修改成一个组件

src/components/GqlUsdt.vue

@@ -1,37 +0,0 @@
-<template>
-	<div>
-		<div id="kc-container"></div>
-	</div>
-</template>
-
-<script>
-	// import $ from 'jquery';
-	export default {
-		name: "GqlUsdt",
-		props: ["title"],
-		data() {
-			return {
-				loadingIndex: null
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				kcStart({
-					containerId: 'kc-container',
-					symbol: this.title,
-					coinScale: parseInt('5'), // 计价币种精度
-					volumeScale: parseInt('5'), // 成交量精度保留
-					interval: '15',
-					timezone: "America/Toronto",
-					language: 'zh_TW'
-				})
-			}
-		},
-	};
-</script>
-<style scoped>
-
-</style>

src/components/OigeUsdt.vue

@@ -1,37 +0,0 @@
-<template>
-	<div>
-		<div id="kc-container"></div>
-	</div>
-</template>
-
-<script>
-	// import $ from 'jquery';
-	export default {
-		name: "OigeUsdt",
-		props: ["title"],
-		data() {
-			return {
-				loadingIndex: null
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				kcStart({
-					containerId: 'kc-container',
-					symbol: this.title,
-					coinScale: parseInt('5'), // 计价币种精度
-					volumeScale: parseInt('5'), // 成交量精度保留
-					interval: '15',
-					timezone: "America/Toronto",
-					language: 'zh_TW'
-				})
-			}
-		},
-	};
-</script>
-<style scoped>
-
-</style>

src/components/PytnUsdt.vue

@@ -8,7 +8,6 @@
 	// import $ from 'jquery';
 	export default {
 		name: "HelloWorld",
-		props: ["title"],
 		data() {
 			return {
 				loadingIndex: null
@@ -17,14 +16,26 @@
 		mounted() {
 			this.init()
 		},
+		watch: {
+		  '$route'(to, from) {
+		    // 可以在这里访问新的路由to和旧的路由from
+		    if(to.query.symbol!=from.query.symbol){
+				location.reload()
+				setTimeout(()=>{
+					this.init()
+				},1000)
+				
+			}
+		  }
+		},
 		methods: {
 			init() {
 				kcStart({
 					containerId: 'kc-container',
-					symbol: this.title,
+					symbol: this.$route.query.symbol,
 					coinScale: parseInt('5'), // 计价币种精度
 					volumeScale: parseInt('5'), // 成交量精度保留
-					interval: '15',
+					interval: sessionStorage.getItem('interval')|this.$route.query.interval,
 					timezone: "America/Toronto",
 					language: 'zh_TW'
 				})

src/components/RpnUsdt.vue

@@ -1,37 +0,0 @@
-<template>
-	<div>
-		<div id="kc-container"></div>
-	</div>
-</template>
-
-<script>
-	// import $ from 'jquery';
-	export default {
-		name: "RpnUsdt",
-		props: ["title"],
-		data() {
-			return {
-				loadingIndex: null
-			}
-		},
-		mounted() {
-			this.init()
-		},
-		methods: {
-			init() {
-				kcStart({
-					containerId: 'kc-container',
-					symbol: this.title,
-					coinScale: parseInt('5'), // 计价币种精度
-					volumeScale: parseInt('5'), // 成交量精度保留
-					interval: '15',
-					timezone: "America/Toronto",
-					language: 'zh_TW'
-				})
-			}
-		},
-	};
-</script>
-<style scoped>
-
-</style>

src/router/index.js

@@ -7,34 +7,17 @@ Vue.use(VueRouter);
 const routes = [
 	{
 		path: "",
-		redirect: "/PytnUsdt",
+		redirect: "/KlineView",
 	},
 	{
 		path: "/",
 		// name: "home",
 		component: HomeView,
 		children: [
-			// {
-			// 	path: '',
-			// 	name: 'PyttnUsdt', // 默认子路由名称
-			// 	redirect: 'PyttnUsdt'
-			// },
 			{
-				path: 'PytnUsdt',
+				path: 'KlineView',
 				// name: 'PyttnUsdt', // 默认子路由名称
 				component: () => import("../components/PytnUsdt.vue")
-			},
-			{
-				path: 'OigeUsdt',
-				component: () => import("../components/OigeUsdt.vue")
-			},
-			{
-				path: 'GqlUsdt',
-				component: () => import("../components/GqlUsdt.vue")
-			},
-			{
-				path: 'RpnUsdt',
-				component: () => import("../components/RpnUsdt.vue")
 			}
 		]
 	}

src/views/HomeView.vue

@@ -61,12 +61,12 @@
 	import $ from 'jquery';
 	// import 'layui-src/src/layui.js';
 	// import 'layui-src/src/css/layui.css';
-	import PytnUsdt from '@/components/PytnUsdt.vue';
+	import KlineView from '@/components/PytnUsdt.vue';
 	// import '../../static/kline/src/klineCharts.js';
 	export default {
 		name: "HomeView",
 		components: {
-			PytnUsdt
+			KlineView
 		},
 		data() {
 			return {
@@ -78,6 +78,9 @@
 				return window.innerWidth <= 768; // 根据你的需求设置移动端的判断条件
 			}
 		},
+		created() {
+			this.$router.replace({ path: '/KlineView', query: { symbol: this.title, interval: kcCurrentData.interval}});
+		},
 		mounted() {
 			$('.interval_btn').on('click', function() {
 				if (kcChart != null || kcChart != undefined) {
@@ -130,10 +133,10 @@
 			});
 			window.addEventListener('resize', this.handleResize);
 			
-			const title = sessionStorage.getItem('title');
+			// const title = sessionStorage.getItem('title');
-			if (!title&&this.$route.path !== '/PytnUsdt') {
+			// if (!title&&this.$route.path !== '/KlineView') {
-			  this.$router.replace({ path: '/PytnUsdt' });
+			//   this.$router.replace({ path: '/KlineView' });
-			}
+			// }
 		},
 		destroyed() {
 			window.removeEventListener('resize', this.handleResize);
@@ -147,29 +150,22 @@
 			handleClick(name) {
 				this.title = name
 				sessionStorage.setItem('title',name)
-				
+				sessionStorage.setItem('interval',kcCurrentData.interval)
-				switch (name) {
+				this.$router.replace({ path: '/KlineView', query: { symbol: this.title, interval: kcCurrentData.interval}});
-					case 'PYTN':
+				// switch (name) {
-						this.$router.replace({
+				// 	case 'PYTN':
-							path: '/PytnUsdt'
+						
-						});
+				// 		break;
-						break;
+				// 	case 'OIGE':
-					case 'OIGE':
+				// 		this.$router.replace({ path: '/KlineView', query: { symbol: this.title, interval: kcCurrentData.interval }});
-						this.$router.replace({
+				// 		break;
-							path: '/OigeUsdt'
+				// 	case 'GQL':
-						});
+				// 		this.$router.replace({ path: '/KlineView', query: { symbol: this.title, interval: kcCurrentData.interval }});
-						break;
+				// 		break;
-					case 'GQL':
+				// 	default:
-						this.$router.replace({
+				// 		this.$router.replace({ path: '/KlineView', query: { symbol: this.title, interval: kcCurrentData.interval }});
-							path: '/GqlUsdt'
+				// 		break;
-						});
+				// }
-						break;
-					default:
-						this.$router.replace({
-							path: '/RpnUsdt'
-						});
-						break;
-				}
 			}
 		}
 	};