路由的使用

    <router-view></router-view>
</div>
<template id="index"> 
    <main>
        <h1>我是首页</h1>
    <router-link to="/detial">详情页</router-link>
    </main>
    
</template>
<template id="my">
    <h1>我是我的</h1>
</template>
<template id="fenlei">
     <main>
        <router-link to="/index">猜你喜欢</router-link>
        <router-link to="/my">我的</router-link>
        <router-view></router-view>
    </main>
</template>
<template id="detial">
    <h1>详情页</h1>
</template>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script>
    var index={
        template:'#index'
    }
    var my={
        template:'#my'
    }
    var fenlei={
        template:'#fenlei'
    }
    var detial={
        template:'#detial'
    }
    var router=new VueRouter({
       routes: [ 
           {
                path:'/fenlei',
                component:fenlei,
                children:[
                   
                    {
                    path:'/my',
                    component:my
                    }
                    
                ]
            },
            {
            path:'/index',
            component:index
            },
            {
            path:'/detial',
            component:detial
            },
        {
            path:'/*',
            redirect:'/fenlei'

        }
        
        ]
    })
new Vue({
    el:'#app',
    router:router
})
</script>