Using Vue with Quasar and a Router

Question

I'm new to Quasar but I have my MyLayout.vue page and on my page I have q-route-tabs

<q-tabs align="left" shrink>
    <q-route-tab to="/" label="Home" />
    <q-route-tab to="/page1" label="Page One" />
    <q-route-tab to="/page2" label="Page Two" />
    <q-route-tab to="/page3" label="Page three" />         
</q-tabs>

I need to know what page is loaded and the change the Toolbar Title and set certain components hidden based upon the tab selected. Before moving over to Quasar but still using Vue I used

created: function() { 
    if (this.$router.currentRoute.name === "Page One") {
        this.drawer = false;
        this.ToolbarTitle = "Publications Worksheet";
        this.isDisabled = true;
    }
}

this.$router and $router will not compile so I think there must be a different syntax for Quasar

Answer 1

You can add a watch on $route and change the toolbar title based on the page change.

watch: {
  '$route':function () {
      console.log(this.$router.currentRoute.name)
  }
},

codesandbox - https://codesandbox.io/s/interesting-mclean-55xne