1. 程式人生 > >vue-動態路由

vue-動態路由

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>