Vue.js 从Vue路由器导航栏生成完全空白的页面

我试图在用户单击导航栏按钮后生成一个空白页面

我在codepen上的项目中导入了一个Vue路由器

    var demo = new Vue({
    
    // A DOM element to mount our view model.
    el: '#main',

    // This is the model.
    // Define properties and give them initial values.
    data: {
        active: 'what'
    },

    // Functions we will be using.
    methods: {
        makeActive: function(item){
            // When a model is changed, the view will be automatically updated.
            this.active = item;
        }
    }
});

当我在导航栏中单击“如何”和“关于”时，文本成功更改为

"You chose: How/about" 

所以我知道导航条码在工作。但我想生成一个全新的页面

---

当我单击“如何”或“关于”时，我希望首页文本完全消失，并为用户显示一个新页面。如何使标题页文本消失，并生成一个全新的黑色页面？

如果您使用的是Vue路由器，则在使用new Vue（{…}）命令创建Vue实例时，需要将其导入到应用程序中。在上面的示例中，不包括Vue路由器

如果包括VueRouter，则必须创建一个routes页面，其中包含用于/如何和/关于的路由。然后，在导航中，您将需要围绕这两条路线的链路：

如何

关于

---

这些路由将打开您在路由页面中指定的相应组件。

我需要导入Vue路由器。我会稍后再试，如果它被接受，我会接受它。我仍然有一些问题：