router-link和router-view怎么关联？

Question

代码效果

想实现子页面点击不同菜名实现切换

<template>
    <div id="content">
        <el-row class="header">
            <el-menu theme="dark" default-active="1" class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1" class="title">❤&nbsp七嘴八舌</el-menu-item>
                <router-link class="el-menu-item" to="/home">首页</router-link>
                <router-link class="el-menu-item link" to="">个人中心</router-link>
            </el-menu>
            <div class="line"></div>
        </el-row>
        <el-row class="container">
            <el-col :span="4" class="menu">
                <el-menu default-active="2" class="menu" @open="handleOpen" @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-star-on"></i>辣香川菜</template>
                        <el-menu-item-group>
                            <template slot="title">代表地？</template>
                            <el-menu-item index="1-1">四川</el-menu-item>
                            <el-menu-item index="1-2">成都</el-menu-item>
                        </el-menu-item-group>
                        <el-menu-item-group title="名菜">
                            <el-menu-item index="1-3">麻婆豆腐</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <router-link class="el-menu-item" to="/mainPage/yuecai"><i class="el-icon-star-on"></i>五滋粤菜</router-link>
                    <router-link class="el-menu-item" to="/mainPage/chuancai"><i class="el-icon-star-on"></i>脆爽浙菜</router-link>
                    <!--<el-menu-item index="2"><i class="el-icon-star-on"></i>五滋粤菜</el-menu-item>
                    <el-menu-item index="3"><i class="el-icon-star-on"></i>脆爽浙菜</el-menu-item>-->
                    <router-view></router-view>
                </el-menu>
            </el-col>
            <el-col :span="20">
                <router-view></router-view>
            </el-col>
        </el-row>
        <el-row class="footer">
                <p class="footerMsg">Copyright © 2016 ShenYuanYuan.当前呈现版本 1.1.0 16.12.12</p>
        </el-row>
    </div>
</template>


<script>
require('../assets/main.css')

 export default {
   components: {},
   mounted () {
     console.log('挂载好了')
   },
   methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
 }
</script>

<style>

.menu {
    height: 100%;
}

</style>

页面路由

//配置路由
const routes = [ //定义路由
  { path: '/',component: Home},
  { path: '/home',component: Home},
  { path: '/mainPage', component: MainPage,
    children:[
      {path: '/', component: Chuancai},
      {path: '/chuancai', component: Chuancai},
      {path: '/yuecai', component: Yuecai}
    ]
  }
]

但是就是每次点击菜名，都会跳新的一页，并不是在子页面的右侧切换，不知道是什么问题？

Answer 1

自己找到错误原因：

const routes = [ //定义路由
  { path: '/',component: Home},
  { path: '/home',component: Home},
  { path: '/mainPage', component: MainPage,
    children:[
      {path: '/', component: Chuancai},
      {path: 'chuancai', component: Chuancai},
      {path: 'yuecai', component: Yuecai}
    ]
  }
]

自路由写错了。。明明自己改了的。。