webpack router 模块组件的子组件路由

note:是谁的子组件就把渲染的<router-view>标签放在这个组件的下面进行渲染

main文件的代码：

import Vue from 'vue';
import Vuerouter from 'vue-router';
//手动安装vuerouter;
Vue.use(Vuerouter);
//导入app组件
import app from './app.vue';
//导入login组件
import goodlist from './goodlist.vue';
//导入acount组件
import acount from './acount.vue';
//导入login组件
import login from './login.vue';
//导入register组件
import register from './register.vue';

var router=new Vuerouter({
    routes:[
        {path:'/goodlist',component:goodlist},
        {
            path:'/acount',
            component:acount,
            children:[
                {path:'login',component:login},
                {path:'register',component:register}
            ]
        }
    ]
});


var vm=new Vue({
        el:'#app',
        data:{
            message:123
        },
        render:function(cr){
            return cr(app);
        },
        router

});

acount文件的代码：

<template>
    <div>
        <h1>我是count组件</h1>
        <router-link to="/acount/login">login</router-link>
        <router-link to="/acount/register">register</router-link>
        <router-view></router-view>
    </div>
    
</template>

<style></style>
<script></script>