0

At the moment I am displaying google maps in a div, whenever I change route, I want to replace the view with another view. I tried to set it as below, but it doesn't work

 .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) Outputs Adventure so it's fine.

Error I am getting Uncaught (in promise) TypeError: Cannot read property 'name' of undefined and screen page going fully white.

Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
Dave
  • 1
  • 1
  • 9
  • 38

1 Answers1

1

You should use $route instead of route :

.map-col(ref="mapCol" v-if="$route.name == 'Adventure'")
Boussadjra Brahim
  • 82,684
  • 19
  • 144
  • 164
  • Once I change routes, then go back to Adventure route, it doesn't load my map, do you might know why? I am using onMounted to load everything. – Dave May 26 '21 at 09:25
  • `router-link(:to="{name: 'Adventure'}")` , when I go back to this view it's like mounted not working. – Dave May 26 '21 at 09:27
  • https://pastebin.com/k01j29Z1 when I go to this view normally it's fine, but when I change the route, and go back to this view from other route the map doesn't load at all. – Dave May 26 '21 at 09:34