Day 23 - Vue Router参数路由

昨天我们提到了如何透过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}