適用場景

• 動態路由有一個什么適用場景呢？
• 比如在寫商品詳情頁面的時候，頁面結構都一樣，只是商品id的不同，所以這個時候就可以用動態路由。

文檔解釋

• 首先我們來看看官方文檔上是怎么解釋動態路由的？
• 你可以在一個路由中設置多段“路徑參數”，對應的值都會設置到$route.params中，例如：

路徑參數

使用

• 首先我們動手試一下上面表格中第一個模式的實現，我們新建一個文件夾并其下新建test.vue：

test.vue

• 到router文件夾 > index.js > 打開并輸入：

index.js

• 再到test.vue組件中：
• 在這里需要說明一下$route.params.testId是什么意思了，大概你也猜得出來，就是獲取當前路由的參數。
  
  test.vue

• 現在輸入localhost:8080/#/test/這里隨便帶個什么參數”就可以就可以看到：

Image.png

以上這就是動態路由的第一個模式了。

模式二用法

• 如果第一個模式你能看懂，那么表格中的第二個模式也就不在話下，我就不做標注解釋了。

修改路由index.js文件

修改test.vue文件

瀏覽器中輸入