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>
