从 Vue Router 导航栏生成一个完全空白的页面

Question

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

我在 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;
        }
    }
});

当我点击导航栏中的 How 和 About 时，文本成功更改为

"You chose: How/about" 

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

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

Answer 1

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

如果包含 VueRouter，则必须创建一个包含 /how 和 /about 路由的路由页面。然后在您的导航中，您需要将这两条路线的链接括起来：

<router-link to="/how">How</router-link> <router-link to="/about">About</router-link>

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