vue的Router多层路由
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <router-link to="/h5"><p>H5</p></router-link> <router-link to="/java">java</router-link> <router-link : to="{name:'java'}">java</router-link>根据name获取组件 <router-view></router-view> </div>
<template id="h5"> <div> <h5>html语言</h5> <img src="img/123.jpg" width="500px"> <router-link to="/h5/basic">basic</router-link> <router-link to="/h5/big">big</router-link> </img> <div style="width: 300px; height: 500px; border: 3px solid red;"> <router-view></router-view> </div>
</div> </template>
<template id="java"> <div> <h5>java语言</h5> <img src="img/456.jpg" width="500px" /> </div> </template>
<template id="basic"> <div> <h6>html基础</h6> <img src="img/1.jpg" width="300px"/> </div> </template> <template id="big"> <div> <h6>html大神</h6> <img src="img/2.jpg" width="300px"/> </div> </template>
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <script> let H5 = Vue.extend({ template:"#h5" }); let Java = Vue.extend({ template:"#java" });
let Basic = Vue.extend({ template:"#basic" });
let Big = Vue.extend({ template:"#big" });
let routes=[{ path:"/h5", component:H5, children:[ {path:"basic",component:Basic}, {path:"big",component:Big},{ path:"/", redirect:"basic" }] }, { path:"/java", name:'java', component:Java }];
let router = new VueRouter({ routes });
new Vue({ router }).$mount("#app"); </script> </body> </html> |
