昨天我們提到了如何透過Vue-Router切換頁面，今天我們來談談如何傳遞參數到路由上。

new Vue({
    router: new VueRouter({
        routes: [
            {path: "", component: HelloWorld},
            {path: "/About", component: About},
            {path: "/Detail/:id", component: Detail},
        ]
    }),

假設今天有三個頁面要做切換，首頁渲染HelloWorld.vue、/About渲染About.vue，Detail則必須要傳入名為id的參數。

<!-- Detail.vue -->
<template>
	<div>
		<div>Detail</div>
		<div>id: {{id}}</div>
	</div>
</template>

<script>
    export default {
        name: "Detail",
        computed: {
            id() {
                return this.$route.params.id;
            }
        }
    }
</script>

我們在Route上，讓path上加上 :id，並定義參數id是一個變數(名稱可以自訂)，我們可以使用 this.$route.params.id 來取得 id 的值，另外，如果想取得的值來自QueryString，可以使用 this.$route.query.id。

不過這時候如果我們沒從前端傳入 id ，會發現並沒有載入 Detail.vue 這個component的，因為Route上指定的 id 是一個必須的參數，可以在參數後面加上問號，讓這個參數變成optional，這樣即時沒有 id，也可以找到Detail組件並載入顯示。

{path: "/Detail/:id?", component: Detail}

Hi, I am Grant.

個人部落格 - https://grantliblog.wordpress.com/
個人網站 - https://grantli-website.netlify.app/#/mainpage
我的寫作專題 - https://vocus.cc/user/5af2e9b5fd89780001822db4#