vue-動態路由
阿新 • • 發佈：2018-11-02
vue-動態路由，當我們有很多列表的時候，我們需要跳轉到每一個列表對應的頁面，每一個頁面來自同一個元件，只是有個別屬性不一樣。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <script src="js/vue-router.js"></script> <style type="text/css"> #sy{ width: 300px; height: 300px; background: lightblue; } </style> </head> <body> <div id="app"> <goods-list></goods-list> <router-view></router-view> </div> </body> </html> <script type="text/template" id='goodsList'> <ul> <li v-for='(item,key) in goods' :key="key"> <router-link to="/goods/detail/${item.id}">{{item.name}}</router-link> </li> <li> <router-link to='/goods/chat'>留言牆</router-link> </li> </ul> </script> <script> var goodsList = { template:'#goodsList', data(){ return { goods:[ {id:1,name:'首頁'}, {id:2,name:'列表'}, {id:3,name:'服務'} ] } } } var child = { template:` <div id="sy">{{$route.params.aa}}</div> ` } var chat = { template:` <div>留言牆</div> ` } var router = new VueRouter({ routes:[ { path:'/goods/detail/:aa', component:child }, { path:'/goods/chat', component:chat } ] }) new Vue({ el:'#app', router, components:{goodsList} }) </script>