根据路线名称更改路线视图答案

【问题标题】：Change route view based on route name根据路线名称更改路线视图
【发布时间】：2021-05-26 09:18:13
【问题描述】：

目前我在 div 中显示谷歌地图，每当我改变路线时，我想用另一个视图替换视图。我尝试如下设置，但它不起作用

 .map-col(ref="mapCol" v-if="route.name == 'Adventure'")
 .map-col(v-else)
    router-view

{
        path: "/adventures/id",
        name: "Adventure",
        component: Adventure,
        children: [
       
          {
            path: "points/id/clues/new",
            name: "NewClue",
            component: NewClue
          }
        ]
      }

console.log(route.name) 输出Adventure 所以没问题。

我得到的错误 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined 和屏幕页面全白。

【问题讨论】：

标签： vue.js vuejs2 vue-router vuejs3

【解决方案1】：

您应该使用$route 而不是route：

.map-col(ref="mapCol" v-if="$route.name == 'Adventure'")

【讨论】：

一旦我改变路线，然后回到冒险路线，它不会加载我的地图，你可能知道为什么吗？我正在使用 onMounted 加载所有内容。
router-link(:to="{name: 'Adventure'}") ，当我回到这个视图时，它就像挂载不工作。
pastebin.com/k01j29Z1 当我正常转到此视图时没问题，但是当我更改路线并从其他路线返回此视图时，地图根本不会加载。