直接範例如下:
假設有個商品列表頁面,提供各個商品的詳細頁面連結
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