vue2，视图路由器屏幕转换问题答案

【问题标题】：vue2, view-router screen transition issuevue2，视图路由器屏幕转换问题
【发布时间】：2022-01-06 09:57:59
【问题描述】：

我不会说英语，但是 vue 更糟糕。我道歉。我正在使用视图路由器登录后进行页面转换。

我正在开发下面的屏幕。 Click here.

当前屏幕未正常曝光。我认为您误解了路由器视图。我会告诉你我的代码。有什么问题？

调用顺序如下：index.html -> App.vue -> Login.vue（真正的首页） -> Main.vue

Route.js

import Menus from "../components/LeftSideMenu.vue";
import Login  from "../views/Login.vue";
import Main from "../views/Main.vue";
Vue.use(VueRouter);

const route = [
    {
        path: "/",
        component: Login
    },
    {
        path : "/main",
        name : "main",
        components: {
            default: Main,
            MENU: Menus
        },
    }
]

App.vue

<template>
  <div>
    <router-view/>
  </div>
</template>

    <template>
      <div>
        <input type="submit" class="fadeIn fourth" value="Log In" @click="login">
      </div>
    </template>
<script>
methods: {
 login() { this.$router.push("/main")
}
</script>

Main.vue

<template>
  <div>
    <MENU/>
    <router-view/>
  </div>
</template>

【问题讨论】：

什么不起作用？请添加详细信息
我的意图是显示两个屏幕，一个侧边菜单和一个视图，但侧边菜单根本不显示。只有主屏幕出现，但我猜是因为应用程序中只显示了一个路由器视图。我没有经验所以我不确定。

标签： vue.js vuejs2

【解决方案1】：

我已经弄清楚你在这里滞后了什么，在你的代码中使用以下正确的。希望它对你有用。

Routes.js

import Menus from "../components/LeftSideMenu.vue";
import Login  from "../views/Login.vue";
import Main from "../views/Main.vue";
Vue.use(VueRouter);

const route = [
    {
        path: "/",
        component: Login
    },
    {
        path : "main",
        name : "main",
        component: Main
    }
]

【讨论】：

谢谢。我继续参考代码进行单页路由，它作为页面上的一个组件启动并按预期进行。