一个vue路由的问题，路由改变，页面不变？

Question

**图片有点模糊，将就一下，高质量的图片试了很多次传不上去。
大致就是从login的页面跳转到home界面后，router-view里面的内容变成了login的内容，about的内容倒是没有变，什么原因？怎么解决？**

//路由配置
const routes: Array<RouteConfig>?=?[

 {

 path: '/login',

 name: 'Login',

 component: () => import('../views/Account/Login.vue')

 },

 {

 path: '/',

 name: 'Main',

 component: Main,

 redirect: 'home',

 children: [

 {

 path: '/home',

 name: 'Home',

 component: () => import('../views/Home/Home.vue')

 },

 {

 path: '/about',

 name: 'About',

 //?route?level?code-splitting

 //?this?generates?a?separate?chunk?(about.[hash].js)?for?this?route

 //?which?is?lazy-loaded?when?the?route?is?visited.

 component: () => import(/*?webpackChunkName:?"about"?*/ '../views/About/About.vue')

 },

 ]

 },

]
const router = new VueRouter({

 mode: 'history',

 base: process.env.BASE_URL,

 routes

})

//home页面
<template>

 <div class="hhh">

 <img alt="Vue?logo" src="../../assets/logo.png" />

 </div>

</template>

<script lang="ts">

import { Component, Vue } from "vue-property-decorator";

export default class Home extends Vue {}

</script>

<style lang="less">

</style>

//主页面，就是有router-view的，app.vue中只有一个router-view

<template>

 <div class="home">

 <div id="nav">

 <router-link to="/home">Home</router-link> |

 <router-link to="/about">About</router-link> |

 <router-link to="/login">login</router-link>

 </div>

 <router-view />

 </div>

</template>

Answer 1

怎么测都是好的，代码如下，大部分copy你得代码，路径可能有点不同
效果如图

// 路由配置
import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Main from '../views/Main.vue'
Vue.use(VueRouter)

  const routes: Array<RouteConfig> = [

    {
      path: '/login',
      name: 'Login',
      component: () => import('../views/Account/Login.vue')
    },
    {
      path: '/',
      name: 'Main',
      component: Main,
      redirect: 'home',
      children: [
        {
          path: '/home',
          name: 'Home',
          component: () => import('../views/Home.vue')
        },
        {
          path: '/about',
          name: 'About',
          // route level code-splitting

          // this generates a separate chunk (about.[hash].js) for this route

          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
        },
      ]
    },
  ]

const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

// login页面
<template>
 <div>
 <router-link to="/home">跳转到首页</router-link>
 </div>
</template>
<script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 export default class Login extends Vue {}
</script>
<style lang="less">
</style>

// main页面
<template>
 <div class="home">
 <div id="nav">
 <router-link to="/home">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/login">login</router-link>
 </div>
 <router-view />
 </div>
</template>
<script>
 export default {
    name: "Main"
 }
</script>
<style scoped>
</style>

// about页面
<template>
 <div class="about">
 <h1>This is an about page</h1>
 </div></template>
<script lang="ts">
 import {Component, Vue} from "vue-property-decorator";
 @Component
 export default class About extends Vue{
    private created() {
      console.log(this.$route)
    }
  }
</script>

// home页面
<template>
 <div class="hhh">
 <img src="../assets/logo.png" />
 </div>
</template>
<script lang="ts">
 import {Component, Vue} from "vue-property-decorator";
 @Component
 export default class Home extends Vue {
  }
</script>
<style lang="less">
</style>

// app页面
<template>
 <div class="home">
<!--    <div id="nav">-->
<!--      <router-link to="/main/home">Home</router-link> |-->
<!--      <router-link to="/main/about">About</router-link> |-->
<!--      <router-link to="/login">login</router-link>-->
<!--    </div>-->
 <router-view />
 </div>
</template>
<script lang="ts">
 import {Component, Vue, Watch} from "vue-property-decorator";
 @Component
 export default class App extends Vue {
    // @Watch('key')
 // public watchKey(newV: any) { //   console.log(newV) // } // // get key() { //   console.log(1) //   return this.$route.fullPath // }
 public mounted() {
      console.log(this.$route)
    }
  }
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
}
#nav {
  padding: 30px;
 a {
    font-weight: bold;
 color: #2c3e50;
 &.router-link-exact-active {
      color: #42b983;
 }
  }
}
</style>