如何从组件中访问路由器

Question

我想在请求 /url/confirm/ 时显示模态。

这是到目前为止所做的：

// footer component
import Modal from '../Modal/Modal';

export default {
    components: {Modal,},
    data() {
        return {
            showModal: false,
        };
    },

    mounted() {
        if (window.location.href.match('/confirm/')) {
             this.showModal = true;
        }
    },
};


// my main js
import MyFooter from './components/footer/MyFooter;
import router from './router';

new Vue({
    el: '#app',
    router,

    components: {MyFooter, /* other components too */}
});

我结合这个 https://router.vuejs.org/en/essentials/dynamic-matching.html#reacting-to-params-changes 来涵盖所有用例？

这行得通，但似乎不是 vue 做事的方式，尤其是我在两个不同的文件中做同样的事情。

如何在 vue 中检测名称为 confirm 的 /confirm/ 路由，以便在我的组件页脚中显示模式？

Answer 1

使用the route object（内部组件可用this.$route）：

if (this.$route.name == 'confirm') {
  this.showModal = true;
}

如何从组件中访问路由器

How to access the router from winthin a component

vue.js

vue-router