vue route

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
 9     <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script>
10 </head>
11 <body>
12     <div id="hdcms">
13         <router-link to="/hdphp">HDPHP</router-link>
14         <router-link to="/hdcms">HDCMS</router-link>
15         <router-view></router-view>
16     </div>
17     <script>
18         const hdphp={
19 
20             template:'<h1>hdphp</h1>'
21         }
22         const hdcms={
23 
24             template:'<h1>hdcms</h1>'
25         }
26 
27          let  routes=[
28                 {path:'/hdphp',component:hdphp},
29                 {path:'/hdcms',component:hdcms},
30             ]
31 
32         let route = new VueRouter({
33 
34             routes:routes
35         });
36         new Vue({
37 
38             el:'#hdcms',
39             router:route
40         });
41     </script>
42 </body>
43 </html>

猜你喜欢

转载自www.cnblogs.com/Spinoza/p/10599640.html