click to jump in vue, url changes all the time, but the page can only jump once. No matter how you click, only url is changing, and the page is no longer changing. There is typescript iview vue, for advice on the technology involved. Thank you
.1. This is router.ts
{
path: "/login",
name: "login",
component: () => import("./views/Login.vue"),
},
{
path: "/home",
name: "home",
component: () => import("./views/Home.vue"),
},
{
path: "/backend",
name: "layout",
component: () => import("./views/layout.vue"),
children: [
{
path: "/backend/addGame",
name: "addGame",
component: () => import("./views/chessGame/gameManage/addGame.vue"),
},
{
path: "/backend/gameInfo",
name: "gameInfo",
component: () => import("./views/chessGame/gameManage/gameInfo.vue"),
},
],
},
2. This is layout.vue, the parent template that puts the components together
<template>
<div>
<topNav></topNav>
<menuNav></menuNav>
<leftNav></leftNav>
<urlNav></urlNav>
<router-view id="routerView"/>
</div>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import topNav from "@/components/topNav.vue";
import menuNav from "@/components/menuNav.vue";
import leftNav from "@/components/leftNav.vue";
import urlNav from "@/components/urlNav.vue";
@Component({
components: {
topNav,
menuNav,
leftNav,
urlNav,
},
})
export default class Home extends Vue {}
</script>
3. This is the root node app.vue
<template>
<div id="app">
<transition
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
mode="out-in"
>
<router-view/>
</transition>
</div>
</template>
4. This is part of the jump page code, which is part of the layout subcomponent
<Menu :open-names="["1"]" @on-select="clickLeft">
<Submenu name="1">
<template slot="title"><Icon type="ios-game-controller-b" /></template>
<MenuItem name="" :to="{name: "addGame"}"></MenuItem>
<MenuItem name="" :to="{name: "gameInfo"}"></MenuItem>
</Submenu>
</Menu>