将 Vue 与 Quasar 和路由器一起使用

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

创建一个方法来检查页面路由
运行页面mount的方法，这样即使link到页面是在不更改路线的情况下加载，您的方法仍然运行
您可以在 $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();
    }
  },

或

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

将 Vue 与 Quasar 和路由器一起使用

Using Vue with Quasar and a Router

vue.js

quasar

或