<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.6/vue-router.js"></script> </head> <style> .view{ width:300px; height:300px; background:purple; } .childView{ width:100px; height:100px; background:green; } .aa{ width:100px; height:70px; background:yellow; } .bb{ width:100%; height:50px; background:cyan; } </style> <body> <div id="app"> <com1></com1> <com2></com2> <div class="view"> <router-link to="/com2">com2</router-link> <router-view></router-view> </div> </div> <template id="childcom"> <div> 我是子路由 </div> </template> <template id="another"> <div> <router-link to="/com2/com4">我是另一个路由</router-link> <div class="bb"> <router-view></router-view> </div> </div> </template> <script> var objarr=[ {id:0,text:"二"}, {id:1,text:"三"}, {id:2,text:"四"}, {id:3,text:"五"}, {id:4,text:"六"}, {id:5,text:"七"} ] var component1={//局部组件 data(){ return{ aaa:objarr } }, template:`<div> 局部组件 <div v-for="(item,index) in aaa"> <span>{{ item.id }}</span> <span>{{ item.text }}</span> </div> </div>` } //声明个全局组件 Vue.component("com2",{ template:`<div> 全局组件 <div v-for="(item,index) in bbb" :key="index"> <span>{{ item.id }}</span> <span>{{ item.text }}</span> </div> </div>`, data(){ return{ bbb:objarr } }, }) // router const routes = [ { path: '/', component: component1 }, { path: '/com2', component:{template:'#another'}, children:[ { path:'com4', component:{template:"#childcom"} } ] } ] const router = new VueRouter({ routes // (缩写) 相当于 routes: routes }) new Vue({ el:"#app", components:{ com1:component1 }, router }) </script> </body> </html>