分類：VueJS

前台純靜態網頁如何傳遞參數

直接範例如下：
假設有個商品列表頁面，提供各個商品的詳細頁面連結

http://learn.ben.docker/html_pass/index.html

進入該連結後，由 JS 取得網址參數 id

http://learn.ben.docker/html_pass/detail.html?id=1

如果在 detail.html 可以取得 id，接下來就可以透過 axios 來 get 遠端資料並顯示

index.html 程式碼:

<!DOCTYPE html>
<html>
<head>
	<title>影片列表頁面</title>
	<style type="text/css">
		a { margin-right: 10px; }
	</style>
</head>
<body>
	<h1>影片列表頁面</h1>

	<div id="app">
		<a :href="'./detail.html?id=' + film.id" v-for="film in films">{{ film.name }}</a>
	</div>

</body>
</html>
<script src="https://unpkg.com/vue"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			films: [
				{ id: 1, name: '影片1' },
				{ id: 2, name: '影片2' },
				{ id: 3, name: '影片3' },
				{ id: 4, name: '影片4' },
				{ id: 52, name: '影片52' }
			]
		}
	})
</script>

顯示結果：
影片列表頁面
影片1影片2影片3影片4影片52

detail.html 程式碼：

<!DOCTYPE html>
<html>
<head>
	<title>影片詳細介紹頁面</title>
</head>
<body>
	<h1>影片詳細介紹頁面</h1>
	<p><a href="./index.html">回首頁</a></p>

	<div id="app">
		{{ id }}
	</div>

</body>
</html>
<script src="https://unpkg.com/vue"></script>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			id: null
		},
		created () {
			this.fetchData()
		},		
		methods: {
			fetchData() {
				this.id = window.location.search.slice(4);
			}
		}
	})
</script>

顯示結果：
影片詳細介紹頁面
回首頁
52