一、概述

• 使用場景：
  
  • 根據商品的id返回指定商品的詳情頁
• 匹配規則

二、程式碼展示

• 目錄結構

注意：components裡面一般存放用於複用的組建
自己編寫的頁面應該新進一個資料夾存放

• goods.vue

<template
 
>
    <div>商品列表
        <span>
            {{ $route.params.goods_id}}
        </span>
    </div>
</template>

• index.js

import Vue from 'vue'
import Router from 'vue-router'
import Goodlists from '@/Goodlists/goods'

Vue.use(Router)

export default new Router({
    mode:"history"
 
,
  routes: [
    {
      path: '/goods/:goods_id',
      name: 'Goodlists',
      component: Goodlists
    }
  ]
})

• mode為hash
  
• mode為history

• 兩種方式的區別就在於#，這兒訪問路徑必須嚴格。