Home » vue » Using Vue with Quasar and a Router

Using Vue with Quasar and a Router

Posted by: admin November 26, 2021 Leave a comment

Questions:

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

Answers:

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

###

  • create a method to check the page route
  • run the method on page mount so that even if the link to the page is
    loaded without route change your method will still run
  • You can add a watch on $route and change the toolbar title based on the
    page change.
 methods: {
    checkCurrentRoute() {
      console.log(this.$route);
      if (this.$route.path == "/PageOne") {
        this.drawer = false;
        this.ToolbarTitle = "Publications Worksheet";
        this.isDisabled = true;
      }
    }
  },
 mounted(){
   this.checkCurrentRoute()
 },

  watch: {
    $route() {
      this.checkCurrentRoute();
    }
  },

OR

  • user this.$router.currentRoute.name
 methods: {
    checkCurrentRoute() {
      console.log(this.$router);
      if (this.$router.currentRoute.name == "Page One") {
        this.drawer = false;
        this.ToolbarTitle = "Publications Worksheet";
        this.isDisabled = true;
      }
    }
  },
 mounted(){
   this.checkCurrentRoute()
 },

  watch: {
    $route() {
      this.checkCurrentRoute();
    }
  },