webpack router的渲染

注意：如果有render渲染了，那么router的组件必须放到render渲染的组件的根目录，原因：

1、render渲染的组件都是通过覆盖index.html来实现的，如果路由的标签<router-view>放在主页的#app根目录，那么是会被render所覆盖；

2、那么由于上面的原因，路由渲染组件的时候，就必须把路由标签<router-view>放在render所渲染的组件的根目录下面，这篇博文render渲染的是app页面的组件，所以就把路由的标签<router-view>放在app文件的template下的div目录下

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';

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


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

});

acount文件代码：

<template>
    <div>
        <h1>我是count组件</h1>
    </div>
    
</template>

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

goodlist文件代码：

<template>
    <div>
        <h1>我是goodlist组件</h1>
    </div>

</template>

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

app文件代码：

<template>
    <div>
        <h1>我是App组件</h1>
        <router-link to="acount">acount</router-link>
        <router-link to="goodlist">goodlist</router-link>
        <router-view></router-view>
    </div>

</template>

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