标签：++ lang content charset vuerouter lan bsp 返回 pre
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> 6 <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.js"></script> 7 </head> 8 <body> 9 <div id="hdcms"> 10 <router-view></router-view> 11 </div> 12 <script type="text/x-template" id="home"> 13 <div> 14 <li v-for="v in news"> 15 <router-link :to="{name:‘content‘,params:{id:v.id}}">{{v.title}}</router-link> 16 </li> 17 </div> 18 </script> 19 <script type="text/x-template" id="content"> 20 <div> 21 <h1>{{field.title}}-{{field.id}}</h1> 22 <p> 23 {{field.content}} 24 </p> 25 <router-link to="/">返回首页</router-link> 26 </div> 27 </script> 28 <script> 29 var data = [ 30 {id:1,title:‘HDPHP开源免费框架‘,content:‘这是内容....‘}, 31 {id:2,title:‘HDCMS内容管理系统‘,content:‘这是HDCMS内容....‘} 32 ]; 33 const home = { 34 template: ‘#home‘, 35 data(){ 36 return { 37 news:data 38 } 39 } 40 } 41 const content = { 42 template: ‘#content‘, 43 data(){ 44 return { 45 field:{} 46 } 47 }, 48 mounted(){ 49 var id =this.$route.params.id; 50 for(let k=0;k<data.length;k++){ 51 if(data[k].id==id){ 52 this.field = data[k]; 53 } 54 } 55 } 56 } 57 let routes = [ 58 {path: ‘/‘, component: home}, 59 {path: ‘/content/:id‘, component: content,name:‘content‘}, 60 ]; 61 //要把组件交给路由器 62 let router = new VueRouter({routes}); 63 new Vue({ 64 el: ‘#hdcms‘, 65 router 66 }); 67 </script> 68 </body> 69 </html>
标签：++ lang content charset vuerouter lan bsp 返回 pre
原文地址：https://www.cnblogs.com/Spinoza/p/10600948.html
