搭建VUE项目（三）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>