OR

Question

我是Quasar的新手，但是我有MyLayout.vue页面，而我的页面上有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>

我需要知道加载了哪个页面，并需要更改工具栏标题，并根据选定的选项卡将某些组件设置为隐藏。在移至Quasar之前，但仍使用我使用过的Vue

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

this。$ router和$ router不会编译，因此我认为Quasar必须使用不同的语法

Answer 1

您可以在$ route上添加手表，并根据页面更改来更改工具栏标题。

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

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

Answer 2

创建一种检查页面路线的方法
在页面挂载上运行该方法，以便即使该页面的链接是加载而无需更改路线，您的方法仍将运行
您可以在$ route上添加手表，并根据页面更改。

 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

用户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();
    }
  },

在Quasar和路由器中使用Vue

2 个答案:

OR