VUE項目實現頁面跳轉

打開一個VUE項目，目錄結構是這樣的：

 

如現在有兩個頁面aaa和HelloWorld，路由配置在index.js中：

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    import aaa from '@/components/aaa'
     
    Vue.use(Router)
     
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: HelloWorld
        },
        {
            path: '/aaa',
          name: 'aaa',
          component: aaa
        }
      ]
    })

現在在HelloWorld中點擊按鈕跳轉到aaa，在aaa中點擊按鈕也可以返回到HelloWorld:

1、HelloWorld:

    <div class="hello">
        <h1>{{ msg }}</h1>
        <button @click="go">點我跳轉</button>
    </div>

    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: '哈哈'
        }
      },
      methods:{
          go(){
              this.$router.push('/aaa')
          }
      }
    }
    </script>

2、aaa:

    <template>
        <div>我是aaa
        <button @click="back">點我返回</button>
        </div>
        
    </template>
     
    <script>
    export default {
      name: 'aaa',
      /*data () {
        return {
          msg: '哈哈'
        }
      },*/
      methods:{
          back(){
              this.$router.push('/')
          }
      }
    }
    </script>