I can't speak English, but vue is worse. I apologize. I am working on page conversion after login using view router.

I am develop the screen below. Click here.

The current screen is not exposed normally. I think you are misunderstanding router-view. I will show you my code. What could be wrong?

The calling sequence is as follows: index.html -> App.vue -> Login.vue (real first page) -> 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>

Login.vue

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

Main.vue

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

CodePudding user response：

I have figured out what you are lagging here use the following correct in your code. Hope it will work for you.

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
    }
]