<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router</title> <style> a{ color: black; } .router-link-active{ color: blue; } </style> </head> <body> <div id="app"> <router-link to="/first">第一页</router-link> <router-link to="/second">第二页</router-link> <router-link to="/third">第三页</router-link> <router-view></router-view> </div> <template id="fir"> <div> <h1>第一页1</h1> <h1>第一页2</h1> <h1>第一页3</h1> </div> </template> <template id="sec"> <div> <h1>第二页1</h1> <h1>第二页2</h1> <h1>第二页3</h1> </div> </template> <template id="thi"> <div id="ap"> <h1>第三页1</h1> <router-link to="/course">第三页2</router-link> <router-link to="/order">第三页3</router-link> <router-view></router-view> </div> </template> <template id="fou"><p>第三页里面1</p></template> <template id="fiv"><p>第三页里面2</p></template> <script src="vue.js"></script> <script src="vue-router.js"></script> <script> //注册template let Fir= Vue.component("first",{ template:"#fir" }); let Sec= Vue.component("secon",{ template:"#sec" }); let Tir= Vue.component("thir",{ template:"#thi" }); let CourseList= Vue.component("four",{ template:"#fou" }); let OrderList= Vue.component("five",{ template:"#fiv" }); // 配置路由 let cc =[{ path: '/course', component: CourseList}, {path: '/order', component: OrderList}]; let route=[ {path:"/",redirect:"first"}, {path:"/first",component:Fir}, {path:"/second",component:Sec}, {path:"/third",component:Tir, children: cc } ]; let router= new VueRouter({ routes:route }); new Vue({ el: "#app", router }) </script> </body> </html>
VUE 路由切换
最新推荐文章于 2023-10-17 22:44:17 发布