vue-router之動態路由

 

❤本篇博客參考愛心老師Ewall的簡書

 

1、路由動態的適用場景

 

好比在寫商品詳情頁面的時候，頁面結構都同樣，只是商品id的不一樣，因此這個時候就能夠用動態路由動態。

 

2、動態路由的官方文檔

傳送地址：https://router.vuejs.org/zh-cn/

 

能夠在一個路由中設置多段「路徑參數」，對應的值都會設置到$route.params中。例如：

 

 

3、動手操做一下吧

♥ 1.先動手試一下上面表格中第一個模式的實現，在咱們以前建立的my-first-project的src文件夾下新建一個文件夾並命名爲view

而後在文件夾下新建test.vue，（沒建立項目的可參考我這篇：https://www.cnblogs.com/crystral/p/9061839.html）

 

---

 

 

♥ 2.打開test.vue文件（可用sublime、webstorm等）

---

 

 

♥ 3.到my-project->src->router->index.js文件，打開並輸入（我是用webstorm打開的，以前學JS也是用webstorm寫）

---

 

 

♥ 4.再到test.vue組件中輸入：

---

 

 

在這裏說明一下，$router.params.testId的意思，固然是獲取當前路由的參數

 

♥ 5.運行項目     （也能夠用cnpm run dev）cnpm 會快一點

---

 

出現下面這個以後

 

♥ 6.打開瀏覽器，輸入localhost：8080

---

 

 

 

以上表格中的第一個模式就完成了，第二個模式同理

 ♥ ① 修改路由index.js文件

---

 

 

 

 ♥ ② 修改test.vue文件

---

 

 

 

♥ ③ Ctrl+S保存以後，打開瀏覽器

---

 

 

以上，完成~~~