vue-router 2 named views

Example of named views

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">

    <div class="judge-leftNav-list">

        <router-link to="/socialManage" class="abc" tag="div"><a>社会治理</a></router-link>
        <router-link to="/citizenService" class="abc" tag="div">市民服务</router-link>
        <router-link to="/gridAnalyze" class="abc" tag="div">网格分析</router-link>

    </div>
    <div class="judge-center">
        <router-view></router-view>
    </div>

    <div class="judge-rightNav-list">
        <!--渲染-->
        <router-view></router-view>
    </div>

  

</div>

CSS

.judge-leftNav-list{float:left;width:100px;background:#aaa}
.judge-center{float:left;width:150px;background:#ddd}
.judge-rightNav-list{float:left;width:200px;background:#ccc}
a{display:block;}

Babel + JSX

const socialTpl = {
       template:'<div>' +
           '<router-link to="/socialManage/highArea" class="second">高发区域</router-link>'+
            '<router-link to="/socialManage/highType" class="second">高发类型</router-link>'+
       '</div>',

   };
   const citizenTpl = {
       template:'<div>' +
       '<router-link to="/citizenService/hotline" class="second">市民热线</router-link>'+
       '<router-link to="/citizenService/advice" class="second">市民意见</router-link>'+
       '<router-view></router-view>'+
       '</div>',
   };
   const highAreaTpl = {template:'<div>我是高发类型</div>'};
   const highTypeTpl = {template:'<div>我是高发区域</div>'};

   const hotlineTpl = {template:'<div>我是市民热线</div>'};
   const adviceTpl = {template:'<div>我是市民意见</div>'};

   const router = new VueRouter({
        routes:[
            {
                path:'/socialManage',
                redirect:to => {
                    return '/socialManage/highArea'
                },
                component:socialTpl,
                children:[{
                    path:'highArea',
                    component:highAreaTpl
                },{
                    path:'highType',
                    component:highTypeTpl
                }]
            },
            {
                path:'/citizenService',
                component:citizenTpl,
                redirect:to => {
                    return '/citizenService/hotline'
                },
                children:[{
                    path:'hotline',
                    component:hotlineTpl
                },{
                    path:'advice',
                    component:adviceTpl
                }]
            },
//            { path: '/', redirect:'/socialManage/highArea' } //设置默认
        ],
   });

   const app = new Vue({
       router,
        el:'#app',
        created: function () {
            this.$router.push('/socialManage/highArea') //刷新回到首页
        }
   })