vue動態路由的寫法

main.vue

<template>
    <div>
        <ul>
            <li @click="toChild('gunsmoke')">click me to go to child</li>
        </ul>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        methods: {
            toChild(data) {
                this.$router.push(`/child/${data}`)
                //this.$router.push({name:'child',params:{data:data}});這樣寫也可以
            }
        },
        components: {}
    }
</script>

router.js寫法

	  {
          path: '/child/:data',
          name: 'child', //加上這個屬性後配合上面的註釋寫法
          component: child
      }

child.vue

<template>
    <div>
        我是子組件
        <slot></slot>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log(this.$route)
        }
    }
</script>

效果圖