Vue.js 2.5.13双主布局切换异常问题求助

我来帮你拆解下这个问题的核心原因，再给出两种可行的解决办法：

为什么会出现这个情况？ #

这个问题的关键在于Vue的客户端路由跳转机制：当你通过页面内的路由跳转（比如点击<router-link>或者调用this.$router.push）时，整个Vue实例是已经挂载好的，路由切换只会更新当前根组件（也就是你一开始挂载的App.vue）里的<router-view>内容，不会重新创建根实例，自然也就不会切换到AdminApp.vue。

而刷新页面时，浏览器会重新加载整个应用，从头执行main.js里的代码，这时候能根据当前的路由路径判断应该挂载AdminApp.vue，所以模板能正常加载。

解决方案 #

方案一：用顶级路由分别挂载两个根组件（推荐） #

这种方式是最符合Vue路由设计的，把App.vue和AdminApp.vue作为两个顶级路由的组件，让路由系统自动切换它们：

1. 修改router/index.js的路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import App from '@/App'
import AdminApp from '@/AdminApp'
// 导入你的页面组件
import PublicHome from '@/views/PublicHome'
import AdminDashboard from '@/views/AdminDashboard'

Vue.use(Router)

export default new Router({
  routes: [
    // 公开页面路由组，根组件是App.vue
    {
      path: '/',
      component: App,
      children: [
        { path: '', component: PublicHome },
        // 这里添加其他公开页面的子路由
      ]
    },
    // 管理后台路由组，根组件是AdminApp.vue
    {
      path: '/admin',
      component: AdminApp,
      children: [
        { path: 'dashboard', component: AdminDashboard },
        // 这里添加其他管理后台的子路由
      ]
    }
  ]
})

2. 修改main.js，让根实例直接使用<router-view>作为模板：

import Vue from 'vue'
import router from './router'

new Vue({
  el: '#app',
  router,
  template: '<router-view />'
})

这样设置后，当你跳转到/admin/dashboard时，路由系统会自动匹配到/admin这个顶级路由，把根<router-view>的内容替换成AdminApp.vue，完美解决跳转时模板不切换的问题。

方案二：监听路由变化，动态重建根实例（适合特殊场景） #

如果你的业务逻辑需要完全销毁旧实例再创建新实例，可以用这种方式，但要注意会丢失实例状态：

修改main.js的代码：

import Vue from 'vue'
import App from './App'
import AdminApp from './AdminApp'
import router from './router'

// 封装挂载根实例的函数
function mountRootComponent() {
  // 判断当前路由是否属于admin
  const isAdminRoute = router.currentRoute.path.startsWith('/admin')
  const RootComponent = isAdminRoute ? AdminApp : App

  // 销毁之前的实例（如果存在）
  if (window.vueInstance) {
    window.vueInstance.$destroy()
    document.getElementById('app').innerHTML = ''
  }

  // 创建并挂载新实例
  window.vueInstance = new Vue({
    el: '#app',
    router,
    render: h => h(RootComponent)
  })
}

// 初始挂载
mountRootComponent()

// 监听路由跳转，当路由在admin和非admin之间切换时，重建实例
router.beforeEach((to, from, next) => {
  const wasAdmin = from.path.startsWith('/admin')
  const willBeAdmin = to.path.startsWith('/admin')

  if (wasAdmin !== willBeAdmin) {
    // 先完成路由跳转，再重建实例
    next()
    router.app.$nextTick(() => {
      mountRootComponent()
    })
  } else {
    next()
  }
})

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