vue 通过按钮使用组件跳转页面_vue.js 主页面组件替换或跳转

我是前端新手，最近公司要求研究vue.js，现在遇到一些困难。是页面跳转的一些问题，已经看了一天了，试了很多方法。网上我也没搜索到有用的东西。我这就直接贴代码了

import AppHeader from './Header'

import AppFooter from './Footer'

import MainPage from './Main'

export default {

components: {

'app-header': AppHeader,

'app-footer': AppFooter,

'app-main': MainPage

}

}

上面这一段是主页面，由三个组件组成的，就是头部底部加上一个中间内容，然后我现在需要在一些按钮的点击方法中实现页面跳转。实现的效果就是中间的主视图跳转，然后头部和底部不变。想问一下·app-main·里面直接是一个页面的html，css，js。

还有在官方文档中看了router-view什么的，也没明白怎么用，大家要是知道的可以给个思路吗？

我在路由配置文件中将要跳转的页面设置成了home的子路由。

import About from 'components/About';

import Home from 'components/Home';

import Hello from 'components/Hello.vue';

import InfoModify from 'compo