Vue.js单组件路由优化：合并组件后的路由配置与跳转方案问询

嘿，我来帮你搞定这个单组件合并和路由优化的问题，分两个部分给你拆解：

问题1：合并组件后的路由跳转与内容切换 #

首先，核心思路是用路由参数来区分两个按钮对应的内容场景，这样只需要一个prisescomplete.vue就能搞定原来两个组件的功能：

第一步：修改info.vue的按钮跳转逻辑

把原来指向两个不同路由的按钮，改成跳转到同一个新路由，通过query参数传递类型标识（也可以用动态路由参数，后面会说）：

<vs-button class="btn" @click="$router.push({name: 'prisescomplete', query: {type: 'normal'}}).catch(err => {})" >Go To</vs-button>
<vs-button class="btn" @click="$router.push({name: 'prisescomplete', query: {type: 'high'}}).catch(err => {})" >Go There</vs-button>

第二步：在prisescomplete.vue中实现内容切换

把原来prises.vue和priseshigh.vue的内容迁移过来，然后根据路由参数控制显示哪部分。这里给你两种常用方式：

方式1：直接用v-if控制（适合内容较少的情况）

<template>
  <div class="prises-complete">
    <!-- 原prises.vue的全部内容 -->
    <div v-if="$route.query.type === 'normal'">
      <!-- 这里放原来prises.vue的代码 -->
    </div>

    <!-- 原priseshigh.vue的全部内容 -->
    <div v-if="$route.query.type === 'high'">
      <!-- 这里放原来priseshigh.vue的代码 -->
    </div>
  </div>
</template>

<script>
export default {
  // 可选：监听路由参数变化，做数据刷新或状态重置
  watch: {
    '$route.query.type'(newType) {
      console.log('切换到内容类型:', newType)
      // 比如根据新类型重新请求数据
    }
  }
}
</script>

方式2：用动态组件（更优雅，适合内容复杂的场景）

把原组件作为子组件引入，通过计算属性动态切换：

<template>
  <component :is="activeComponent" />
</template>

<script>
// 引入原来的两个组件
import Prises from './prises.vue'
import PrisesHigh from './priseshigh.vue'

export default {
  components: {
    Prises,
    PrisesHigh
  },
  computed: {
    activeComponent() {
      // 根据路由参数返回对应的组件名
      return this.$route.query.type === 'normal' ? 'Prises' : 'PrisesHigh'
    }
  },
  watch: {
    '$route.query.type'() {
      // 路由切换时可以重置组件状态
    }
  }
}
</script>

问题2：修改routing.js的路由配置 #

你需要删除原来的两个路由条目，新增一个指向prisescomplete.vue的路由。这里对应上面的参数方式，给你两种配置：

方案1：配合query参数的路由配置

删除原来的prises和priseshigh路由，新增以下条目：

{ 
  path: '/apps/info/info-more/prises-complete', 
  name: 'prisescomplete', 
  component: () => import('./views/apps/info/more/prisescomplete.vue'), 
  meta: { 
    pageTitle: 'info-more', 
    rule: 'editor', 
    no_scroll: true 
  } 
}

方案2：配合动态路由参数的配置

如果想让路径更直观（比如/prises-complete/normal），可以用动态参数：

{ 
  path: '/apps/info/info-more/prises-complete/:type', 
  name: 'prisescomplete', 
  component: () => import('./views/apps/info/more/prisescomplete.vue'), 
  meta: { 
    pageTitle: 'info-more', 
    rule: 'editor', 
    no_scroll: true 
  },
  // 可选：把路由参数转为组件props，解耦$route依赖
  props: route => ({
    type: route.params.type
  })
}

这种情况下，prisescomplete.vue可以通过props接收type参数，不用直接操作$route，更符合组件封装原则：

<script>
export default {
  props: ['type'],
  computed: {
    activeComponent() {
      return this.type === 'normal' ? 'Prises' : 'PrisesHigh'
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者Quantum