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>