使用vue-cli之後，我們順利的編寫了共用函數、共用元件也透過了vue-route做出了動態路由，這篇文章想來個綜合演練，將動態路由配合上共用元件製作出一個範例，大家可以先玩玩看這個範例：

範例檔

重點在於透過網址傳遞參數之後，擷取到參數後將下拉式選單自動Focus傳遞過來的值

首先看看我們Product.vue檔案的內容：

<template>
  <div style="text-align:center; margin-bottom:20px;">Product - {{ $route.query }}</div>
  <DropdownMenu :items="state.selectData.system" :selected="state.selectedData.system"></DropdownMenu>
  <DropdownMenu :items="state.selectData.provider" :selected="state.selectedData.provider"></DropdownMenu>
</template>
<script>
import DropdownMenu from "@/DropdownMenu.vue";
import CommonMixin from "@/utils/CommonMixin.js"
import { onBeforeMount, reactive } from "vue";
import { useRoute } from "vue-router"
export default {
  setup(){
    const { query } = useRoute();
    const { getJsonData } = CommonMixin();
    const state = reactive({
      selectData: {
        system: null,
        provider: null,
      },
      selectedData: {
        system: query.system,
        provider: query.provider,
      },
    })
    onBeforeMount( async () => {
        const { data } = await getJsonData("json/vueComponent.json");
        state.selectData = data;
    })
    return { state }
  },components:{
    DropdownMenu
  },
};
</script>

• 7～10行是import相關的元件，包括：下拉式選單、自訂的共用函數（axios）、vue的生命週期和變數管理、與vue router
• 第13行把vue-router裡面的query抽取出來（我們是透過query來傳遞參數）
• 21、22把抽取出來的參數帶進vue data裡面
• 程式碼的3、4兩行為HTML的元件引入，且傳遞兩個props，一個是選單內容，另一個則是被選取項目
• 其餘的就只是axios和以前常用到的指令

再來看看DropdownMenu.vue檔案的改動，因為之前做元件的時候沒有設定預設選曲項目，所以主要只是增加接收props去改變預設選取項目。

<template>
  <div class="section">
    <div class="select">
      <select :name="items" @change="dataChange" v-model="state.selected">
        <option
          v-for="item in items"
          v-bind:key="item.key"
          :value="item.value"
          :disabled="item.disabled"
          :selected="item.default"
          @change="dataChange"
        >
          {{ item.title }}
        </option>
      </select>
    </div>
  </div>
</template>
<script>
import "./assets/scss/dropdownMenu.scss";
import { reactive } from "vue";
export default {
  props: ["items", "selected"],
  setup(props, target){
    const state = reactive({
        item: props.item,
        selected: props.selected
    });
    function dataChange(){
      target.emit("dropdownmenu-change", event.target.value);
    }
    return { state, dataChange }
  }
};
</script>

接下來我們在App.vue裡面製作兩個連結

<template>
  <h1>{{ "Please select the item you like below" }}</h1>
  <div class="linkArea">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link
      :to="{ path: '/product', query: { system: 'iOS', provider: 'CHT' } }"
      >Product-iOS_CHT</router-link>
    <router-link
      :to="{ path: '/product', query: { system: 'Android', provider: 'FET' } }"
      >Product-iOS_CHT</router-link>
    <router-link to="/contact">Contact</router-link>
  </div>
  <router-view></router-view>
</template>
<style lang="scss" scoped src="./assets/scss/main.scss"></style>

可以看到兩個路由都是進入product，但後面帶的參數不同，分別是：

• query: { system: ‘iOS’, provider: ‘CHT’ }
• query: { system: ‘Android’, provider: ‘FET’ }

接下來進入測試你會發現一個很奇怪的情形，你從Home頁面進入Product頁面的時候，選單會有反應的變更預設項目，但若是從Product第一個連結跳到第二個連結的時候，頁面卻不會更新。

這就只差一步了，最後我們只要在App.vue的頁面中，針對加上一個key就好：

<router-view :key="$route.query"></router-view>

如此一來就完成了透過router提供參數，讓元件內部進行變化的動作囉！